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は じ め に 


イン ター ネッ トバ ブル も つい に は じ け まし た 。 し か し 、 そ れ で も イン ター ネッ 
ト は われ われ に さま ざま な チャ ンス を 与え て くれ ます 。 イ ンタ ーネット は まだ ま 
だ 発展 途上 な の で す 。 こ れ か ら も 着実 な 成長 を 遂げ て いく こと で し ょ う 。 

JavaScript が 登場 し てこ か ら す で に 6 年 が 経ち まし た 。 こ の 間 に さ ま ざ ま な 技術 
が 登場 し まし た が 、JavaScript は 廃れ て いく どこ ろか ます ます 重要 な 技術 に な っ 
て いる よう に 思い ます 。 

この よう な 中 で 、Web を 製作 する デザ イナ ー、 プ ログ ラマ ー は 相変わらず 足 
りな いと いう 状況 が 続い て いま す 。 こ れ は 、 た だ 単に HTML が 書け る デザ イナ ー 
や プロ グラ マー、 絵 が 描け り る デザ イナ ー と いう 人 た ち で は あり ませ ん 。 ユ ー ザ ー 
の 使い 勝手 を 考え 、 イ ンタ ーネット の 技術 に 精通 し 、「Cool!] と 思わ ず 叫 び た 
く な る よう な サイ ト を 作れ る 人 た ち で す 。 

いき な りこ うい っ た レベ ル に 到達 する の は 難し いと 思い ます 。 や は り 第 1 歩か 
ら は じ め な く て は な り ま せん 。 本 書 が そう いっ た レベ ル を 目指 す 方 の お 役に立て 
れ ば と 思い ます 。 

この 本 を 執筆 する に 当たり 、 真 夜中 に な ら な いと 仕事 を し な い 閉 者 の 叱 喧 激励 
と 、 困 難 な 編集 作業 、 動 作 確認 を し て いた だ いた 福井 荘介 様 、 ま た より よい 書籍 
に する べく 作業 を し て いた だ いた スタ ッ フ の 方 々 に 感謝 いた し ます 。 

最後 に 、 執 筆 に あたり さま ざま な 面 で サポ ー ト し て くれ た 妻 記子 に 感謝 し ま 
す 。 


2001 年 11 月 
宮坂 雅 輝 
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本 書 の 注意 事項 


田 表 記 に つい て 

本 書 に 記載 し た スク リプ ト は 、 紙 面 の 都合 上 、 本 来 必 要 の な い 個 所 で 改行 され 
て いる こと が あり ます 。 エ ラー が 発生 する 場合 は 不要 な 改行 を 取り 除い て みて く 
だ さい 。 本 来 1 行 な の に 改行 を し て いる 部 分 に は 「 回 」 を 付加 し て いま す 。 

また 、 本 書 で は 書籍 ペー ジ の 都合 に より HTML の 表記 を 省略 し て いる 部 分 が あ 
り ま す 。 


一 サン プル スク リプ ト に つい て 
本 書 に 掲載 され て いる スク リプ ト を 、 以 下 の URL で 提供 し て お り ま す 。 


URL 了 mhttp://www.neko-no-te.net/books/]83/ 
画 対 象 ブ ラウ ザ 


本 書 の 対象 Web ブ ラウ ザ と 、5Section3 か ら の 各 サ ンプ ル に 表示 し て いる 動作 
確認 欄 の アイ コン マー ク の 表記 は 、 次 の よう に な っ て いま す 。 


Windows 
Microsoft Internet Explorer6 IE6 
Microsoft Internet Explorer5/5.5 IE5 
Microsoft Internet Explorer4 IE4 
Microsoft MSN Explorer6 表記 な し 
Netscape Navigator6.2 NN6 
Netscape Navigator 4.7 以 降 NN4 
@Macintosh 
Microsoft Internet Explorer5 IE5 
Microsoft Internet Explorere4.5 IE4 
Netscape Navigator6.1 NN6 


Netscape Navigator4.7 以 降 NN4 











な お 、MSN Explorer は 、 イ ンス トー ル さ れ て いる マシ ン の IE の バー ジョ ン と 
同じ よう に 表示 され ます 。 そ の た め 、 本 書 で は 動作 確認 の 欄 に は 記載 し て お り ま 
ん 。 

難 WWeb ブ ラウ ザ の 動作 確認 は 、 次 の OS 環境 で 行っ て いま す 。 


計 








OUTLINE 








JavaScript と は 





JavaScript を 一 言 で いう な ら ば 「 オ ブ ジ ェクト 指向 スク リプ ト 言 語 ] で す 。 し か 
し 、 こ れ だ け で は 身 も 蕎 も あり ませ ん 。 そ こ で 、JavaScript の 成り 立ち か ら 見 て 
みる こと に し まし ょ う 。 


較 JavaScript の 成り 立ち 


JavaScript は 、Netscape 社 が Netscape Navigator2.0 (以下 NN2) の ベ 
ー タ 版 を 公開 し た と き に 実装 され た LiveScript を 起源 に し て いま す 。 こ れ が 
NN2 の 正式 版 で JavaScript1.0 と し て 発表 され た の が 、JavaScript の は じ ま り 
で す 。NN2 が Web ブ ラウ ザ の シェ ア の 大 半 を 握る に し た が い 、Web 上 で の スク 
リプ ト 言 語 と し て JavaScript は 重要 な 役割 を 担う よう に な り ま し た 。 

この 後 、JavaScript に と っ て 大 き な 出 来 事 が 起こ と り ま す 。 そ れ は 1996 年 の 8 
月 に 、Microsoft 社 か ら Internet Explorer3.0 (以下 IE3) が 登場 し た こと で す 。 
この Web ブ ラウ ザ は Windows の 技術 に 特 化し た ActiveX を 導入 し 、 さ ら に ス 
クリ プ ブ ト で も Visual Basic Scripting Edition (以下 VBScript) と と も に 、 
JavaScript1.0 互 換 の JScript1.0 を 実装 し て いま し た 。 IE3 は 無償 と いう こと も 
あり 、 旋 速 に シェ ア を 伸ばし た の で す 。 

Netscape 社 は 、 こ の IE3 に 対抗 する 形 で Netscape Navigator3.0 (以下 
NN3) を 1996 年 10 月 に 登場 させ まし た 。 

NN3 に は 、 大 幅 な 機能 強化 を 行っ た JavaScript1.1 が 実装 され て いま し た 。 こ 
の 機能 強化 で 、Web ペ ー ジ を イン タラ クティ ブ に する こと が で きる よう に な り 
まし た が 、 そ の た め に IE3 に 実装 され て いる JScript と JavaScript1.1 の 互換 性 の 
問題 が 発生 し まし た 。JavaScript1.1 で 強化 され た 機能 を 使う と IE3 で は 正常 に 
動作 し な い の で す 。 こ れ 以 後 、Web ペ ー ジ 制作 者 は 互換 性 の 問題 に 悩ま され る 
よう に な り ま し た 。 

1997 年 に な る と 、 イ ンタ ーネット は か な り 一 般 に 使わ れる よう に な り ま し た 。 
Microsoft 社 、Netscape 社 は それ ぞ れ 機能 を 強化 し た Internet Explorer4.0 
(以下 IE4)、Netscape Communicator4.0 (ブラ ウザ 部 分 は Netscape 
Navigator4.0 : 以下 NN4) を 出荷 し 、IE4 は JScript3.0 (JavaScript1.1 互 換 )、 
NN4 は JavaScript1.2 を それ ぞ れ 搭載 し まし た 。 た だ 、Java Script1.2 は 、 
NN4 専 用 の 機能 拡張 が 多かっ た の で 、 あ まり 一 般 的 に は な り ま せん で し た 。 
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マ JavaScript1.2 を 搭載 し た Netscape Navigator4.0 
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3Ni1lno 識 


その 後 、1998 年 8 月 に リリ ー ス され た NN4.06 で は JavaScript1.3 が 実装 され 
て いま す 。 こ の バー ジョ ン で は Unicode に 対応 し 、 さ ら に 新しい メソ ッ ド や プ 
ロ パ ティ が 追加 され て いま す 。 

そし て 、1999 年 の 3 月 に 、Web ブ ラウ ザ の 位置 付け を 変え る 製品 が 登場 し ま 
し た 。 そ れ が Internet Explorer5 (以下 IE5) で す 。 IE5 は 、 見 た 目 こそ IE4 か ら 
大 き な 変 化 は あり ませ ん が 、XML、XSL に 対応 する こと に より 、Web ブ ラウ ザ 
の 枠 に 収まら ず 、 ア プリ ケー ショ ン の フロ ント エン ド を 担える 製品 に な っ て きた 
の で す 。 ス クリ プ ト 面 で は JScript が 強化 され 、 ア プリ ケー ショ ン 作 成 に 耐え ら 
れる まで に 拡張 され て いま す 。 

さら に 、2001 年 9 月 に Internet Explorer6 (以下 IE6) が 出荷 され まし た 。 た 
だ 、Macintosh 版 は 、 ま だ 公開 され て いま せん (2001 年 10 月 現在 )。IE6 で は 、 
ECMA Script(P.6 参 照 ) や W3C の 各種 仕様 へ の 対応 が より 進ん で いま す 。 ま た 、 
Windows Media Player と の 統合 も 進 び な ど 、 よ り ブ ロー ドバンド 対応 と な 
り 、 イ ンタ ーネット 環境 の 進化 に 合わ せ た ソ フト ウェ ア に な っ て いま す 。 IE6 で 
は 、JScript に 大 き な 進 化 は な く 、 基 本 的 に IE5 と ほとん ど 同 様 で す 。 


マ JScript5.5 を 搭載 し た Internet Explorer6 
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は 晴れ す (読売 新聞 ) 





一 方 、Netscape 社 は 、AOL に 買収 され る な ど 数 々 の 激動 の 中 、NN4 の 改良 
を 細か く 続 け て きま し た 。200 1 年 10 月 現在 の 日 本 語 版 は 、 バ ー ジ ョ ン 4.78 ま で 
公開 され て いま す 。 こ の バー ジョ ン で も JavaScript1.3 が 実装 され て いま す 。 

この NN4 の 改良 と は 別に 、2000 年 12 月 に Netscape6 (以下 NN6) が 公開 され 
まし た 。Netscape 社 は NN6 を 開発 に する に あたり 、Netscape Navigator の 
ソー スコ ー ド を 公開 し て 、Mozilla プ ロジ ェクト (http://www.mozilla.org/) 
を 立ち 上 げ 、 ネ ッ ト 上 で の 開発 を 試み まし た 。 全 面 的 な ソー スコ ー ド の 書き 換え 
や 、W3C 準 拠 の 各種 機能 サポ ー ト な ど 野 心 的 な プラ ン で し た が 、 そ の 完成 は 遅 
れ に 遅れ まし た 。 

NN6 は 、 こ の Mozilla プ ロジ ェクト で 開発 され た プロ グラ ム を 基 に 、 さ ら に 改 
良 を 行っ た も の で す 。 し か し 、 動 作 ス ピー ド が 非常 に 遅く 、 多 く の バ グ が 存在 し 
た こと で 、 あ まり 使わ れ ま せん で し た 。 そ の 後 、 動 作 ス ピー ド の 向上 と 多く の バ 
グ が 修正 され た Netscape6.1、Windows XP 対応 を 表明 し た Netscape6.2 と 
改良 され て いま す 。NN6 で は JavaScript1.5 が 実装 され て いま す 。 


マヤ JavaScript1.5 を 実装 し た Netscape6 
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@Web ブ ラウ ザ の JavaScript の バー ジョ ン 対 応 





この よう に 、 発 展 し て きた Web ブ ラウ ザ ( と 実装 され た JavaScript) で す が 、 
今後 は 、 そ の あり 方 自体 が 大 きく 変わ る 可能 性 が あり ます 。 た と えば 、 
Internet Explorer と いう Web ブ ラウ ザ は 、 IE6 が 最後 だ と いう 話 が あり ます 。 
これ は 、Microsoft 社 が Web ブ ラウ ジン グ の 機能 を 完全 に OS で ある Windows 
と 統合 する こと で 、 ユ ー ザ ー が Web ブ ラウ ザ と いう 存在 を 意識 し な く な る こと 
を 意味 し て いる か も し れ ま せん 。 

この 分 野 は 、 ま だ まだ 発展 途上 中 な の で 、 こ れ か ら も 革新 的 な 製品 や 状況 が 生 
まれ て くる こと で し ょ よう 。 


田 ECMA Script 

1996 年 に IE3 と NN3 が 出荷 され 、 そ れ ぞ れ に 強力 な JScript、JavaScript1.1 
が 実装 され た こと で 、JavaScript を 使っ て さま ざま な 表現 手段 が 可能 に な り ま し 
た 。 し か し 、 す で に 述べ た よう に 、 互 換 性 と いう 非常 に 大 き な 問 題 が 起こ と り ま し 
た 。 どちら も JavaScript を ベー ス に し て いた の で す が 、 独自 の 拡張 が 行わ れ た り 、 
実装 の 不備 が ある な どの た め に 、 片 方 の Web ブ ラウ ザ で 動い た JavaScript が 、 
も う 一 方 の Web ブ ラウ ザ で は 動か な いと いっ た こと が 頻繁 に 起こ と り ま し た 。 そ 
の た め 、Web ペ ー ジ 制作 者 は ペー ジ 制 作 時 に それ ぞ れ の Web ブ ラウ ザ で 動作 確 
認 し た り 、 ひ どい と き に は それ ぞ れ の Web ブ ラウ ザ 専 用 に 別々 の ペー ジ を 用 意 
する 必要 が あっ た の で す 。 

この 状況 に 困っ た Web ペ ー ジ 制作 者 は 、 標 準 規格 を 求め る よう に な り ま し た 。 
そこ で Netscape 社 は JavaScript の 標準 化 案 を 国際 標準 化 団体 の ECMA に 提出 
し 、Microsoft 社 も 対抗 案 を 提示 し まし た 。ECMA は 両者 の 標準 化 案 を うま く 

合 さ せ 、1997 年 7 月 に 標準 規格 ECMA-262 と し て 制定 し て いま す 。 こ れ は 
ECMA Script と 呼ば れ 、 ベ ー ス と な っ た JavaScript1.1 に 似 た も の に な っ て い 
ます 。 

その 後 ECMA-262 は 、 機 能 拡張 が 行わ れ 、 現 在 第 3 版 (1999 年 12 月 制定 ) と 
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な っ て お り 、 JavaScript の 実装 に あめ た っ て は この 規格 が 標準 と な っ て いま す 。 
IE6 や NN6 な ど は 、ECMA Script へ の 準拠 度 が 高く な っ て いま す 。 
ECMA に つい て は 、 次 の URL を 参照 し て くだ さい 。 


URL http : / /www . ecma .ch/ 


圏 JScript 

ここ で JScript に つい て 簡単 に まとめ て お きま し ょ う 。 JScript は 、Microsoft 
社 が JavaScript 互 換 の スク リプ ト 言 語 と し て 実装 し た も の で す 。Microsoft 社 
は スク リプ ト 言 語 を IE3 に 実装 する 際 に 念入り に アー キテ クチ ャ を 検討 し 、 非 常 
に スマ ー ト な 形 で 実装 し て きま し た 。 そ れ が ActiveX Scripting で す 。 

この 技術 で 重要 な こと は 、Web ブ ラウ ザ か ら ス クリ プ ト の 実行 エン ジン を 切 
り 離 し た と いう 部 分 に あり ます 。 こ れ に より 、 ス クリ プ ト エ ンジ ン だ け の バー ジ 
ョ ン を 上 げ る と いっ た こと が 可能 に な り ま す 。 た と えば IE5 を 使っ て いた と し て 
も 、 ス クリ プ ト エ ンジ ン の バー ジョ ン を アッ プ デ ー ト する と 新しい 機能 が 使え る 
よう に な り ま す 。 さらに 、 複 数 の スク リプ ト を 動作 させ る アプ リケーション (ホホ 
スト アプ リケーション と 呼ぶ ) で 、1 つ の スク リプ ト エ ンジ ン を 共有 する こと も で 
きま す 。 ま た 、1 つ の OS 上 に それ ぞ れ 異な る スク リプ ト 言 語 を 実行 する スク リブ 
ト エ ンジ ン を 用 意 す る こと で 、 ホ スト アプ リケーション に 対し て 複数 の スク リプ 
ト 言 語 の 使用 を 許可 する こと も で きま す (IE で VBScript と JScript が 動作 する の 
は この た めで す )。 

200 1 年 10 月 現在 、JScript 実 行 エ ンジ ン の 最新 の バー ジョ ン は JScript5.6 と 
な っ て いま す 。Windows の スク リプ ト に つい て は 、 次 の URL を 参照 し てく だ さ 
い 。 


URL http : / /mgdn .microgoft .com/Bcripting/ 


還 JavaScript は スク リプ ト 言 語 


JavaScript は 名 前 の 示す と お り ス クリ プ ト 言 語 で す 。 ス クリ プ ト 言 語 は 以前 か 
ら あ る も の で 、UNIX 環 境 で は 非常 に よく 使わ れ て きま し た 。 反 復 的 な シス テム 
管理 タス ク を ひと まとめ に し て 、 シ ステ ム 管 理 を 簡単 に する と いっ た 目的 に 使わ 
れ て いま す 。 代表 的 な スク リプ ト 言 語 と し て は Bourne Shell、Cshell、Awk、 
Sed、Perl な ど が あり ます 。 こ れ ら の スク リプ ト 言 語 と JavaScript の 大 き な 違 い 
は 、 JavaScript は 主 に Web ブ ラウ ザ 上 で 動作 する も の で ある と いう こと で す 。 
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3Ni1lno 較 


一 JavaScript と Java の 違い 

JavaScript に は 、 見 て わか る よう に 「Javal」 と いう 言葉 が 含ま れ て いま す 。 し 
か し 、JavaScript と Java は まっ た く 関 係 が あり ませ ん 。Netscape 社 は 、 開 発 
当初 LiveScript と いう 名 前 で 発表 し て いま し た が 、 ち ょ うど その ころ 発表 され た 
Java と の マー ケティング 的 な 関係 か ら 、NN2 の 出荷 時 に 「JavaScript」 と いう 名 
前 で 公開 され た の で す 。 そ の た め 名 前 に 「Java」 と いう 言葉 が 含ま れ て いま す が 、 
開発 経緯 、 設 計 思 想 な ど が 異な る た め 、 ま っ た く 別 の も の で す 。 

ここ で 少し だ け Java に つい て も 触れ て お きま し ょ う 。Java は イン ター ネッ ト 
だ け に と ど ま ら ず 、 昨 今 の コン ピュ ー タ 業界 の 中 で 非常 に 重要 な 役割 を 占め る よ 
うに な っ て いま す 。 こ の Java に は プロ グラ ミン グ 言 語 と し て の 側面 と 、 実 行 環境 
と し て の 側面 が あり ます 。 通 常 の ブログ ラミ ング 言語 、 た と えば C 言 語 、C++ 言 
語 、Pascal な ど と いっ た も の は 実行 環境 ご と に (要する に それ ぞ れ の OS ご と に ) 
コン パイ ラ が 用 意 さ れ 、 コ ン バ イ ル し た 後 の 実行 ファ イル は 各 O0S ご と に し か 動 
作 し ませ ん 。 そ れ に 対し て Java は 、Java VM (Virtual Machine) 上 で 動作 す 
る と いう 実装 に し た た め 、 ど の よう な OS 上 で あっ て も Java VM さえ 存在 すれ ば 
実行 で きま す 。 つ まり 、 ど の OS 上 で あっ て も 同じ Java の プロ グラ ム フ ァ イル で 
実行 で きる こと に な り ま す 。 

Java を 大 きく 分 ける と 、Web ブ ラウ ザ 上 で 動く Java ア プレ ッ ト (Applet) 、 
クラ イア ント Java プ ログ ラム 、 サ ー バ ー サ イド Java プ ログ ラム の 3 つ に な り ま す 。 
Web ペ ー ジ 制作 者 に に と っ て は 、Java ア プレ ッ ト と サー バー サイ ド Java プ ログ ラ 
ム に 注目 する 必要 が ある で し ょ う 。 

Java ア プレ ッ ト は 、Web サ ー バ ー か ら ア プレ ッ ト と 呼ば れる 小さ な Java プ ロ 
グラ ム を ダウ ン ロ ー ド し て Web ブ ラウ ザ 上 、 ま た は OS 上 の Java VM の 上 で 動 
作 し ます 。 し か し 現状 で は 、Java VM の 起動 ・ 動 作 が 遅い た め Java ア プレ ッ 

ト を 使う こと は ほとん ど あ り ま せん 。 

サー バー サイ ド Java プ ログ ラム に は いく つか の 種類 が ある の で す が 、 こ の 中 で 
も Web サ ー バ ー の 機能 拡張 と し て 使わ れ て いる Servlet や EJB(Enterprise 
Java Beans) が 注目 され て いま す 。 こ れ ら は Java 言 語 の 生産 性 の 高 さ や 、 安定 
性 か ら 、 最 近 の 電子 商取引 の 基盤 技術 と し て 使わ れ は じ め て いま す 。 

少な く と も Java と JavaScript が まっ た く 異 な る も の で ある と いう こと が わか 
っ て いた だ けた で し ょ うか ? 


田 JavaScript の 特徴 

JavaScript を 使う こと に より 、 ど の よう な こと が で きる の で し ょ うか ? さま 
ざま な イン ター ネッ ト 関 連 技術 の 中 で も 、JavaScript は 重要 な 役割 を 担っ て いま 
す 。 ま ず JavaScript は Web ブ ラウ ザ の 中 で 動作 する た め 、WWW (World 
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Wide Web) を 使っ て いる ほとん どの 人 の 環境 で 動作 し ます 。 さら に 、 制 作 に あ 
た っ て 特別 な ツー ル を 必要 と する こと も な く 、 単純 な テキ スト エディ タ が あれ ば 
作成 で きま す 。 ま た スク リプ ト 言 語 で ある た め 、 コ ン パ イル と いっ た 作業 も 必要 
あり ませ ん 。 JavaScript は 、 数 ある スク リプ ト 言 語 の 中 で も 、 非 常に 敷居 の 低い 
も の で ある と いえ ます 。 

JavaScript は Web ブ ラウ ザ 側 、 つ まり クラ イア ント 側 で 動作 し ます 。 こ れ は 、 
Web サ ー バ ー の 管理 者 で な く て も 、Web ペ ー ジ に さま ざま な 機能 の 追加 を 、 簡 
単に 行え る こと を 意味 し 、CGI な ど と 比較 し て 、 非 常に 大 な メリ ッ ト と な っ て 
いま す 。 そ の た め 、 ほ と ん ど 同 じ こ と を する の で あれ ば 、CGI よ り も JavaScript 
で 実装 させ た ほう が よい こと に な り ま す 。 た だ し 、 当 然 JavaScript に は で き な い 
こと が ある の で 、 実際 に は CGI と 使い 分 ける の が も っ と も よし 制作 スタ イル で あ 
る こと は 間違い あり ませ ん 。 


田 JavaScript で は で き な い こと 

ここ で 、JavaScript で は で き な い こと を 挙げ て お きま し ょ う 。 大 きく いう と 2 
つ あ り ま す 。 

1 つ 目 は 、 セ キュ リティ の 関係 か ら 、Web ブ ラウ ザ の 動作 し て いる マシ ン か ら 
情報 を 取り 出し た り 、 書 き 込ん だ りす る こと が で きま せん (Cookie は 除く )。 こ 
れ は 、Web ブ ラウ ザ で Web ペ ー ジ に アク セス し た と き に 、 勝 手 に ハー ド デ ィ ス 
ク 内 か ら デ ー タ が 取り 出さ れる と いっ た こと や 、 逆 に ウイ ルス な ど を ハー ド デ ィ 
スク 内 に 書き 込ま れ な いた め の 仕 様 で す 。 

2 つ 目 は 、JavaScript は Web ペ ー ジ を 見 る 側 か ら コ ー ド を 隠す こと が で き な 
いこ と で す 。 JavaScript は HTML 文 書 内 に 記述 され て いる た め 、Web ブ ラウ ザ 
で ペー ジ を 表示 し た 人 は 簡単 に コー ド を 見 る こと が で きま す 。Web ペ ー ジ 上 で 、 
ある 機能 を どの よう に し て 実現 し て いる か を 知ら れ た く な いと き に は 、 
JavaScript で は な く 、 他 の 方 法 を 使う の が よい で し ょ う 。 

こう いっ た 制約 が ある た め 、JavaScript は クラ イア ント 側 で の フォ ー ム の た め 
の 事前 処理 や 、 ダ ウン ロー ド し た Web ペ ー ジ の 要素 を イン タラ クティ ブ に 動作 
させ る と いっ た 用 途 に 向い て いま す 。 





aNinino 識 


JavaScript の 展開 





前 の セク ショ ン で 紹介 し た よう に 、JavaScript に は 非常 に 簡単 な が ら 、 か な り 
強力 な プロ グラ ム の 作成 能力 が あり ます 。 こ の 点 に 注目 し て 、 さ ま ざ ま な 場面 で 
JavaScript を 使 お うと いう 試み が 行わ れ て いま す 。 


還 DHTML で の JavaScript 


IE 上 、NN の 両者 に は 、Dynamic HTML (以下 DHTML) と いう 機能 が 実装 され 
て いま す 。 こ れ は 名 前 は 同じ も の な の で す が 、IE と NN と の 間 に 互 換 性 は ほとん 
ど あ り ま せん 。 し か し 、 両 者 と も 目指 す 方 向 性 は 同じ で す 。 そ れ は 、GIF ア ニ メ 
ーション や Java ア プレ ッ ト を 使わ ず に 、Web ペ ー ジ 内 の 各 HTML 要 素 を 、 再 読 
み 込 みな し に 動か そう と いう も の で す 。 

この DHTML が どの よう に 実装 され て いる か と いう と 、Cascading Style 
Sheets (以下 CSS) と 呼ば れる スタ イル シー ト の 各 要 素 の 属性 値 を 、 ス クリ プ ト 
言語 に より ダイ ナミ ッ ク に 変化 させ る と いう 方 法 が 取ら れ て いま す 。 そ の た め 、 
スク リプ ト 言 語 が 重要 に な っ て お り 、 と り わ け IE と NN の 両方 で 動作 する 
JavaScript の 重要 性 が 増し て いま す 。 


還 Web サ ー バ ー サ イド で の JavaScript 


JavaScript に は 、Web ブ ラウ ザ と いう クラ イア ント 環境 で 動作 する イメ ー ジ 
が あり ます が 、 実際 に は Web サ ー バ ー 側 で も か な り 使 われ て き て いま す 。Web 
サー バー 側 の スク リプ ト 言 語 と いう と 、 す ぐに 思い 付く の が CGI に 使わ れ て いる 
Perl で す 。Perl は 非常 に 強力 な の で す が 、CGI 上 で 使う と いう 点 と 、 さ ま ざ ま な 
記述 で 同じ 機能 が 実現 で きる 柔軟 性 が ある た め 、 書 く 人 に よっ て コー ド が バラ バ 
ラ に な っ て し まう 傾向 が あり ます 。 

こう いっ た 状況 の 中 で 、Web サ ー バ ー 側 で スク リプ ト を 動作 させ て し まお う 
と いう 製品 が いく つか が 登場 し こい ます 。 た と えば 、Microsoft 社 の Active 
Server Pages( 以 下 ASP) と いっ た も の で す 。ASP は 、Web サ ー バ ー で ある 
Internet Information Server (以下 IIS) と と も に 無償 で ある た め 、 最 近 で は さ 
ま ざ ま な Web ペ ー ジ で 使わ れる よう に な っ て きま し た 。 

ASP と は 、HTML 文 中 に サー バー サイ ド で 動作 する スク リプ ト を 記述 し 、 そ の 
ペー ジ の 要求 が きた 時 点 で スク リプ ト を 実行 し 、 ダ イナ ミッ ク に ペー ジ を 生成 し 
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て 送り 出す も の で す 。 こ の スク リプ ト 記 述 用 の 言語 と し て 、VBScript、JScript 
が 標準 で 実装 され て いま す 。 


マ ASP の 動作 概念 図 


Web サー バー 
Web ペ ー ジ の 要求 





ASP スク リプ ト に 


8 - より 、Web ペ 
生成 され た Web ペ ー ジ 送信 ー ジ を ダイ ナ 
DB へ の 接続 | ] ミッ ク に 生成 











DB サー バー 


ASP で は デー タベース へ の 接続 も 非常 に 簡単 に 行う こと が で きる の で 、 イ ント 
ラ ネ ッ ト 構 築 な ど で は 非常 に 重要 な 役割 占め る よう に な っ て いま す 。 ま た 、 
Microsoft 社 の .NET 戦 略 の 中 の 1 つの テク ノロ ジー で ある ASP.NET も 、 JScript 
に より 記述 する こと が で きま す 。 


届 デス クト ッ プ へ の 展開 


JavaScript は 、 も は や WWW の 世界 で は 、 な く て は な ら な いも の で す 。 逆 に 
一 般 に は 、WWW 上 で 使う も の と いう 認識 も あり ます 。 し か し 、 最 近 で は 、 
JavaScript は 思わ ぬ と ころ で 使わ れ て いた り し ます 。 た と えば 、Windows で 
は Windows Scripting Host( 以 下 WSH) に より 、JavaScript は Windows の 
スク リプ ト 言 語 と し て 使え る よう に な っ て いま す 。 

WSH と は Windows 上 で の スク リプ ブ ト 言語 実行 環境 で す 。 Web ペ ー ジ 内 で 
JavaScript を 用 いる の と 同様 の こと を 、Windows 上 で も 行う こと が で きま す 。 
さら に WSH は 、 さ ま ざ ま な 組み 込み オブ ジェ クト を 実装 し 、Windows 全 体 の 
コン トロ ー ル も 可能 に な っ て いま す 。 そ の た め 、 簡 単 な こ と な ら ば 、Visual 
Basic( 以 下 VB) な ど で プ ログ ラム を 作成 し な く て も 、WSH で 実現 で きる よう に 
な り ま す 。 

WSH で は IE 上 で の スク リプ ト 言 語 の 実装 状況 と 同じ よう に 、Active 
Scripting に 対応 する スク リプ ト 実 行 エ ンジ ン が 用 意 さ れ て いる スク リプ ブ ト 言語 
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aNi]lino 較 


な ら は 動作 し ます 。 標 準 で は VBScript、 JScript が 組み 込ま れ て いま す 。 

な お 、WSH は Windows 98/Me/2000/XP に 搭載 され て いま す 。 Windows 
98 以 前 の Windows 95/NT 4.0 の 場合 に は 、Microsoft 社 か ら 無償 で イン スト 
ー ル ファ イル が 提供 され て いま す 。 次 の URL か ら ダ ウン ロー ド し て くだ さい 。 


URL http : / /www.microsoft.com/]apan/devel1oper/gcripting/ 


較 そし て すべ て の 環境 へ 


スク リプ ト 言 語 は Web ブ ラウ ザ か ら ク ライ アン ト 環 境 へ と 、 使 用 範囲 を 広げ 
て きま し た 。 今後 、 さ ら に その 範囲 を 広げ よう と し て いま す 。Windows の 世界 
で は WSH に より JScript な どの スク リプ ブ ト 言語 で Windows の すべ て を コン トロ 
ー ル で きる よう に な っ て いま す 。 た と えば 、 ス クリ プ ト 言 語 で ADSI(Active 
Directory Service Interface) や WMI(Windows Management 
Interface) を 操作 する と 、 ユ ー ザ ー 管 理 、 マ シン 管理 、 シ ステ ム 管 理 な ど と いっ 
た シス テム 管理 の ほとん どの こと が 実現 で を る よう に な り ま す 。 

そし て 、Microsoft SQL Server7.0/2000 で も 、 デ ー タ 操作 言語 な ど に スク 
リプ ト 言 語 が 使え る よう に な っ て いる た め 、 デ ー タ ベー ス の 分 野 に お いて も 
6 人 iD 

さら に JavaScript は 、Web サ ービス を 実現 する 際 に も 重要 な 役割 を 担う と 思 
われ ます 。Web サ ービス は 、 ク ライ アン ト か ら の 要求 に 対し て 、 単 に Web の ペ 
ー ジ を 返す だ け で な く 、 そ の 問い 合わ せ に 対し て 何ら か の 処理 を し た 結果 を 返し 
た り 、 サ ービス を 行っ た りす る こと で す 。Web サ ービス は 、XML(eXtensible 
Markup Language) を メッ セー ジン グ の フォ ー マ ッ ト と し て 使い 、 シ ステ ム 
間 の 連携 を 容易 に し ます 。Web サ ービス を 実現 する 技術 に は さま ざま な も の が 
あり ます が 、 先 ほど の ASP や ASP.NET の よう に JavaScript で 記述 で きる も の が 
多数 あり ます 。 

この よう に スク リプ ト 言 語 、 そ の 中 で も JavaScript は 重要 な 存在 で 、 い ずれ す 
べ て の コン ピュ ー テ ィング 環境 で 使わ れる こと に な る で し ょ う 。 
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ョ 9q コ 1AON 上 還 


JavaScript の 組み 込み 





この セク ショ ン で は 、JavaScript の 記述 に あたり 必要 な 情報 を 、 わ か りや すく 
解説 し て いま す 。 ま ず は 、JavaScript の 組み 込み か ら で す 。 


還 JavaScript の 組み 込み 方 


Web ペ ー ジ に JavaScript を 組み 込む お の は 非常 に 簡単 で す 。 JavaScript に 限ら 
ず 、Web ペ ー ジ に スク リプ ト を 組み 込む と き に は 、 以 下 の よ うに <script> タ グ 
を 用 いて 記述 し ます 。 


<script 1anguage= "使用 する 言語 "> 
スク リブ ト 文 
</ Script> 


組み 込む スク リプ ト 言 語 が JavaScript な ら 、 次 の よう に 記述 し ます 。 


な お 、language 属 性 は HTML4.0 で は 非 推奨 属性 と な っ て お り 、 将 来 は な く 
な る 予定 で す 。 HTML4.0 以 降 で は language 属 性 の 代わ り に type 属 性 を 用 いて 、 
以下 の よう に 記述 し ます 。 


た だ し 、type 属 性 は 現在 の と ころ すべ て の Web ブ ラウ ザ に 対応 し て いる わけ 
で は あり ませ ん 。 そ の た め 、 本 書 で は 従来 どおり の language 属 性 を 用 いて 解説 
を し て いき ます 。 


還 JavaScript の 書き 方 
JavaScript を 書く と き に は 、 次 の 点 に 注意 し て くだ さい 。 


人 @[:」 が 命令 の 区 切り と な る 
人 大 文字 と 小文字 を 区 別 する 


一 javaScript で の 1 命令 文 

VB な ど で は 、1 行 に つき 1 つの 命令 と いっ た 規則 が あり ます が 、JavaScript に 
は その よう な 制限 が あり ませ ん 。 し か し 、 何 の 規則 も な いと どこ か ら ど こま で が 
1 つの 命令 な の か 区 別 が つか な く な っ て し まい ます 。 そ こ で 、「:」( セ ミコ ロン ) を 
命令 と 命令 の 区 切り 文字 と し て 使い ます 。 

JavaScript の 命令 は 、 複 数 の 命令 を 1 行 に 記述 し て も か まい ませ ん 。 逆 に 、1 
つの 命令 を 複数 の 行 に 分 け て 記述 し て も か まい ませ ん 。 た だ し 、 こ の と き に 気 を 
付け な く て は な ら な い の は 、 命令 や 変数 名 の 単語 の 途中 で 改行 を し て は いけ な い 
と いう こと で す 。 


上 記 の 記述 を 、1 行 に 書き 換え る と 次 の よう に な り ま す 。 


逆 に 、1 行 で 記述 で きる 命令 を 複数 の 行 に も 分 割 で きま す 。 


上 記 の 命令 は 、 以 下 の よ うに 記述 する こと も で きま す 。 
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39qa1AoNy 半 


田 大 文字 と 小文字 

JavaScript で 用 いる 変数 名 や キー ワー ド 、 メ ソ ッ ド 名 や プロ バテ ィ 名 は 、 そ れ 
ぞ れ 大 文字 ・ 小 文字 を 区 別 し ま す 。 そ の た め 、 大 文字 ・ 小 文字 を 間違っ て いる と 
エラ ー と な り ま す 。 

Basic 系 の 言語 や スク リプ ト で は 、 大 文字 と 小文字 の 区 別 を し な く て も よい の 
で 、 こ れ ら の 言語 に 慣れ て いる 方 は 、 注 意 す る 必要 が あり ます 。 


一 JavaScript を 記述 する 位置 

JavaScript を 実装 する た め の <script> タ グ は 、HTML フ ァイル の どの 位置 に 
記述 すれ ば よい の で し ょ うか ? 多く の Web ペ ー ジ で は <head> タ グ の 中 に 配置 
し て いる よう で す 。 し か し 、 フ ォ ー ム ボタ ン に 関連 付い た スク リプ ト な ど は 、 そ 
れ ぞ れ の 要素 の 近く に 記述 する と メン テ ナ ン ス が し や すい と いっ た 場合 が あり ま 
す 。<script> タ グ は HTML フ ァイル 中 に 何 回 で も 記述 する こと が で きる の で 、 
好み に 応じ て 使う こと が で きま す 。 こ こ で 、 気 を 付け な く て は な ら な い の は 、 ス 
クリ プ ト の 呼び 出し より も 先 に スク リブ ト の 本 体 を 記述 し て お く 必 要 が ある と い 
うこ と で す 。 

た と えば 、Web ペ ー ジ 読み 込み 時 に 動作 させ た い ス クリ プ ト は 、<body> タ 
グ の onload 属 性 に よる 呼び 出し より も 先 に 記述 し な く て は な り ま せん 。 


較 コメ ント 


JavaScript の コー ド の 中 に は 、 コ メン ト を 入れ る こと が で きま す 。 コ メン ト を 
利用 し て スク リプ ト 内 に コー ド の 解説 を 入れ る こと に より 、 ス クリ プ ト の メン テ 
ナン ス が 容易 に な り ま す 。 コ メン ト を 入れ る 方 法 は 2 種類 あり ます 。 


人 @// コメ ント 
人 @/* コメ ント */ 


まず 、「//] に より コメ ント を 記述 する 方 法 で す 。 こ の 「//」 は 、 記述 し た 部 分 か 


ら 行末 まで を コメ ント と し て 扱い ます 。 つ まり 、1 行 の コメ ント を 入れ る と き に 
使い ます 。C++ 言 語 や Java 言 語 な ど で 使わ れる コメ ント の 実装 と 同じ で す 。 
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SECTION 2-1 金 JavaScript の 組み 込み 


<body> 
<8Cript 1anguade= "ava8Cript"> 
そま = ュ 
// この 行 は コメ ント と し て 扱わ れ ま す 。 
document .write ("He11o JavaSorip 上 Wor1d!"): 
/ メ っ ー テ 
< く / 8C エ ip セキ > 
</bodY> 
</htm1 > 


次 は 、「/*」 と 「*/] で コメ ント を 囲む 方法 で す 。 囲 ん だ 範囲 が コメ ント と し て 扱 
われ ます の で 、 間 に 改行 を 入れ る こと も 可能 で す 。 こ れ は 主 に C 言 語 な ど で 使 わ 
れる コメ ント の 実装 と 同じ 方 法 で す 。 





<htm1 > 
< 上 1t1e> コ メン ト の 実装 2</ モ 1t1e> 
<body> 


<8Crip 1anguade= "ava8Cript"> 


し Rn 
/* 複数 行 に 
わた る コメ ント に も 
対応 し ます 。 */ 
document .write("He11o JavaScript Wor1d!"): 
Aa 
</ 8Cr1p キ > 
</body> 
</htm1 > 
剛 外部 ファ イル を 用 いて 実装 


HTML フ ァイル に 直接 JavaScript を 記述 する 方 法 は 、 す で に 述べ た と お り 、 
記述 性 、 メ ン テ ナ ンス 性 が よく な る の で す が 、 不 都合 が 生じ る こと も あり ます 。 

た と えば 、 次 の よう な 場合 に は 、 で きれ ば HTML フ ァイル に 直接 JavaScript 
を 記述 し た く は あり ませ ん 。 
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39qa1AoNy 較 


= @ 非 常に 長い スク リブ ト 
== @ さ ま ざ ま な HTML フ ァイル で 同じ スク リプ ト を 使う 
@JavaScript の コー ド を 見 せ た く な い 


その た め 、JavaScript で は スク リプ ト だ け を 書い た 外部 ファ イル を 用 意 し 、 そ 
れ を 呼び 出し て 実装 する と いう こと も で きま す 。 外 部 ファ イル の 読み 出し に は 
<Script> タ グ の src 属 性 を 用 いま す ( 値 は 相対 パス 、 も し く は 絶対 パス で 指定 )。 





<Script 1anguage="]avascript" src="****。]5"> 
< く / Script> 


な お 、JavaScript の コー ド を 書い た 外部 ファ イル の 拡張 子 は 「.jsj と し な く て 
は な り ま せん 。 


較 組 み 込 み の サ ンプ ル 
外部 ファ イル に よる 実装 サン プル を 挙げ ます 。 外 部 スク リブ ト フ ァイル を 呼び 
出す HTML フ ァイル は 、 次 の よう に な り ま す 。 





そし て 呼び 出さ れる JavaScript の ほう は 、「ex_write.js] と いう 名 前 で 次 の よ 
うな コー ド を 記述 し た ファ イル を 作り ます 。 


この サン プル を 表示 させ る と 次 の よう に な り ま す 。 





午 外部 ファ イル で の 実装 - Microsoft Imternet Explorer | 
イル E) 編集 表示 お 気 に 和 D(8) ツー ル CD JI プ ⑪ 9 


外部 ファ イル を 呼び 出す 


Hello JavaScript 


田 外 部 ファ イル 組み 込み の 注意 点 

外部 ファ イル に よる JavaScript の 実装 は 、JavaScript を サポ ー ト し て いな い 
Web ブ ラウ ザ か ら ス クリ プ ト を 自動 的 に 隠せ る と いっ た メリ ッ ト が あり ます 。 
し か し 、HTML フ ァイル の 他 に 別 の ファ イル を ダウ ン ロ ー ド する 必要 が ある た め 、 
Web サ ー バ ー へ の 負荷 が 高く な り 、 処 理 の 遅い Web サ ー バ ー や 、 高 負荷 状態 の 
Web サ ー バ ー に 置く と 問題 が 起こ る 可能 性 が ある 点 に 注意 し て くだ さい 。 

また 、 外 部 ファ イル に よる JavaScript の 実装 で は 、HTML フ ァイル に は スク 
リプ ト を 記述 し な い の で HTML フ ァイル ソー ス と し て は 隠せ ます 。 し か し 、 色 部 
ファ イル は いっ た ん Web ペ ー ジ を ブラ ウジ ング し て いる ユー ザー の PC 上 に ダウ 
ン ロ ー ド され る た め 、 完 全 に ユー ザー か ら 隠 せる わけ で は あり ませ ん 。 

な お 、 こ の 外部 ファ イル に よる 実装 は NN2、IE3 で は 動作 し ませ ん 。 


画 外 部 ファ イル 組み 込み に 必要 な Web サ ー バ ー の 設定 

外部 JavaScript フ ァイル を 使う と 、Web サ ー バ ー か ら 拡 張子 が 「.js] の ファ 
イル を ダウ ン ロ ー ド し ます 。 し か し 、 WWW サ ー バ ー の 初期 設定 で は JavaScript 
ファ イル を ダウ ン ロ ー ド で き な い よう に な っ て いる 場合 が あり ます 。 そ こ で 、 サ 
ー バ ー 側 で JavaScript フ ァイル の ダウ ン ロ ー ド 要求 に 対処 で きる よう に 設定 する 
必要 が あり ます 。 

現在 、Web サ イト を 提供 し て いる イン ター ネッ ト サ ー ビ スプ ロバ イダ (以下 
ISP) の 大 半 は 、UNIX 上 に Apache と いう Web サ ー バ ー を 実装 し 、 サ ービス を 
行っ て いま す 。ISP で すでに 外部 ファ イル の 取り 込み が で きる よう に 設定 され て 
いる 場合 に は 問題 あり ませ ん が 、 そ れ 以 外 の 場合 は 自分 で 設定 する し か あり ませ 
ん 。Web サ ー バ ー の 管理 者 な ら ば 、httpd (Web サ ー バ ー の プロ グラ ム 名 ) の 設 
定 を 、 ユ ー ザ ー な ら 「.htaccess] と いう ファ イル を 編集 し ます 。 

で は 、Apache の 場合 の 設定 方 法 を 記述 し ます 。 
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39qnAoyl 


39qanAony 較 


@httpd の 設定 を 変更 する 方 法 
JavaScript フ ァイル が 扱え る よう に MIME タ イプ を 追加 し ます 。 方 法 は 2 
種類 あり ます 。 


・「< イ ンス トール し た ディ レク トリ >/conf」 の 下 に ある 「mime.types」 
に 、 以 下 の 1 行 を 追加 し ます 。 


・「< イ ンス トー ル し た ディ レク トリ >/conf」 の 下 に ある 「srm.conf」 に 
以下 の 1 行 を 追加 し ます 。 


ファ イル 内 で 追加 する 場所 は 、 設定 ファ イル を 見 て 、 同 様 の 記述 の 前 後に 
記述 する と よい で し ょ う 。 


便 「.htaccess」 を 編集 する 方 法 
JavaScript フ ァイル の 置か れ て いる Web サ ー バ ー 上 の ディ レク トリ に 
「.htaccess]」 と いう ファ イル を 用 意 し ます 。UNIX で は 「.」( ピ リオ ド ) が ファ 
イル 名 の 最初 に 付く と 、 隠 し ファ イル と し て 扱わ れ ま す 。 こ の ファ イル に 、 
以下 の よう な 記述 を 追加 し ます 。 


この 設定 を 行っ て も 、JavaScript フ ァイル が ダウ ン ロ ー ド され な U い 場合 は 、 
ISP の Web サ ー バ ー が Apache で な いか 、ISP が 「.htaccess」 を 使う の に 必要 な 
設定 を 行っ て いな い 可 能 性 が あり ます の で 、ISP に 問い 合わ せ て くだ さい 。 


剛 エラ ー に つい て 


JavaScript を 組み 込ん だ Web ペ ー ジ 内 に 、JavaScript の 文法 の エラ ー が あっ 
た 場合 は どう な る の で し ょ うか ? 次 の よう な 警告 ウィ ンド ウ が 表示 され ます 。 
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ママ IE で の エラ ー メ ッ セ ー ジ 
当 Imternet Explorer 
Web ペー ツ に 問題 が ある た め 、 正 < 表示 し な く な る mf 
3 た 生コン ミ タフ ル の 0 
人 で 人 まま 


絞 ペー ツ に エラ - が ある と き は 、 こ の メッ セー ツジ を いつ も 表示 する (@) 


Esiroke 





ライ ン 5 


_ 盾 江 





エラ ー の 表示 方 法 は Web ブ ラウ ザ に よっ て 異な り ま す 。Web ブ ラウ ザ に よっ 
て は エラ ー が 存在 する と 思わ れる 行 が 表示 され る 場合 も ちり ます し 、 ス テー タス 
バー に エラ ー が ある と だ け 表 示さ れる も の も あり ます 。 エ ラー と 思わ れる 行 が 表 
示さ れ て いる 場合 は 、 そ の 行 ま で に エラ ー が ある と いう こと を 示し て いる の で 、 
その 行 ま で を 注意 深く 確認 する こと で 、 素 早く エラ ー を 発見 する こと が で きま す 。 


還 JavaScript に 対応 し て いな い Web ブ ラウ ザ の た め の 記 述 


JavaScript は 、 現 在 の 主要 な Web ブ ラウ ザ で 動作 し ます 。 し か し 、Web ブ 
ラウ ザ の 中 に は JavaScript が 動作 し な いも の が あり ます し 、 家 電 や PDA な ど に 
組み 込ま れ て いる Web ブ ラウ ザ で は 、 JavaScript が 動作 し な いも の が 多数 存在 
し ます 。 

Web ペ ー ジ を 作成 する 場合 、 こ れ ら の JavaScript が 動作 し な い Web ブ ラウ 
ザ に も 配慮 する 必要 が あり ます 。 JavaScript が 動作 し な い Web ブ ラウ ザ の た め 
に で きる 対応 は 2 つ あ り ま す 。 


スク リプ ト の コメ ント 処理 
@@<noscriDt> タ グ の 記述 


田 ス クリ プ ト の コメ ント 処理 
JavaScript が 動作 し な い Web ブ ラウ ザ に は 、「 ス クリ プ ト 行 を コメ ント の よう 
に 見 せる 」 と いう 方 法 を 用 いま す 。 


23 


39qanwo 


aa 








通常 HTML 文 で は 、 注 釈 宣言 (<!-- コメ ント -->) を 用 いて コメ ント を 記述 し ま 
す が 、 こ れ を 応用 し て JavaScript に 対応 し て いな い Web ブ ラウ ザ で は スク リプ 
ト 全 体 を コメ ント と し て 認識 する よう に し ます 。HTML 文 の コメ ント の 指定 と 異 
な る の は 、 コ メン ト の 終了 部 の 前 に 「//] が 入っ て いる こと で す 。 こ の 「/」 は 
JavaScript で は コメ ント 行 と し て 認識 され ます 。 こ れ が な いと JavaScript の 実 
行 エ ンジ ン は 「-->」 を 解釈 で き な い 命令 と し て 認識 する た め エ ラー と な っ て し ま 
いま す 。 そ の た め 、JavaScript を Web ペ ー ジ に 実装 する と き に は 次 の よう な 形 
で 組み 込む の が 一 般 的 で す 。 


<scrtpt 1anguage="]avascript"> 
く !-- 
スク リプ ト 
7/--> 
< く / Script> 


JavaScript の 動作 する Web ブ ラウ ザ は 、<script> タ グ を 認識 し て スク リブ ト 
を 実行 し ます が 、<script> タ グ を 認識 で き な い Web ブ ラウ ザ は コメ ント タグ に 
囲ま れ た 部 分 を 解釈 せ ず 、 ス クリ プ ト を 実行 し ませ ん 。 


圏 <noscript> タ グ 

スク リプ ト を コメ ント 行 で 囲 お むこ と に より 、JavaScript に 対応 し て いな い 
Web ブ ラウ ザ が スク リブ ト の 処理 を し な いよ うに で きま す 。 た だ 、 そ れ だ け で 
は JavaScript が 動作 し な い Web ブ ラウ ザ で は 、 何 も 処理 を 行わ な いよ うに し た 
だ け で す 。JavaScript が 動作 し な い Web ブ ラウ ザ に 対し て も 、 代 わり の メッ セ 
ー ジ を 表示 する な ど 、 何 ら か の 配慮 を し て お く 必 要 が あり ます 。 


レス 


この と き に 用 いる の が <noscript> タ グ で す 。<noscript> 一 </noscript> の 
間 に 記述 し た 内 容 は 、JavaScript に 対応 し た Web ブ ラウ ザ で は 無視 され ます 。 
次 の 記述 を JavaScript 対 応 ブ ラウ ザ と 非 対 応 ブ ラウ ザ で 表示 し て み ま し ょ う 。 





マ JavaScript 対 応 ブ ラウ ザ で の 表示 


当 noscript - Microsoft Internet Explorer 


: カイ ル (E) 編集 D 表示 お 気 に 入 D@ ウー- ル MD へ 2 ゆ 
OR・ の 6 回 国人 の の 時 


Hello JavaScript World 


<noscript> 一 </noscript> 間 
は 表示 され な い 





マ JavaScript 非 対応 ブラ ウザ で の 表示 


noscript 一 NCSA 本 psaic 


Please chckhere. 


代替 ペー ジ へ の リン ク 
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39qa1Aoy 議 





JavaScript で 扱え る デー タ 





スク リプ ト で は さま ざま な 情報 を 扱い ます 。 た と えば 、 文 字 列 、 数 字 と いっ た 
も の で す 。 JavaScript で は 、 情 報 を 次 の 4 つの 形式 に 分 類 し て 扱い ます 。 


人 @JavaScript で 扱え る デー タ 型 





他 の 言語 に 比べ る と 扱え る デー タ の 型 が 少な い の で す が 、 あ まり 高度 で 複雑 な 
処理 を し な い 限 り 問 題 と な る こと は な いで し ょ う 。 


JavaScript の 数 値 型 は 、 他 の 言語 と 比較 する と 非常 に 少な いで す 。 こ れ は 、 
Java な どの 言語 で は 細か く 分 か れ て いる 数 値 の まう を 、 ひ と まとめ に し て いる か 
ら で す 。 こ の た め 、 複 雑 な 計算 を 行 お うと し た 場合 は 問題 が 起こ る こと が あり ま 
す 。JavaScript の 数 値 型 は 、 整 数 と 浮動 小数 点数 の 両方 扱う こと が で きま す 。 


較 整 数 

「 整 数 」 と は 小数 点 以下 を 持た な い 数 値 の こと で す 。 整 数 に は 正 と 負 が あり 、 表 
現 で きる 最大 の 整数 は 、 動 作 さ せる OS や Web ブ ラウ ザ に よっ て 異な り ま す 。 ま 
た JavaScript で は 、10 進 数 、8 進 数 、16 進 数 の 3 種類 の 整数 を 扱う こと が で きま 
す 。 例 と し て は 次 の よう な も の が あり ます 。 





画 浮 動 小数 点数 

「 浮 動 小 数 点数 ] と は 、 小 数 点 以下 を 持ち 、 小 数 の 表現 が 浮動 小数 点 に より 表 さ 
れ て いる も の で す 。 浮動 小 数 点数 に も 正 と 負 が あり 、 さ ら に 小数 点 以 下 の 精 度 は 
OS や Web ブ ラウ ザ に より 異な り ま す 。 浮動 小数 点数 で は 小数 点 以下 を 持っ た 10 
進数 、 ま た は べき 乗 の 識別 子 (E、e) と 指数 を 持っ た 10 進 数 を 取り 扱え ます 。 





賠 文字 列 


文字 列 と は 0 文字 以上 の 文字 の こと を いい ます 。 文字 列 は 「"」( ダ ブル クォート ) 
また は 「'」( シ ング ルク ォ ー ト ) で 囲ん で 記述 し ます 。 





ダブ ルク ォ ー ト や シン グル クォート で 囲む と 、 数 字 で も 文字 列 と し て 扱わ れ ま 
す 。 最 後 の 囲ま れ た 文字 の な い 「" "」 は 、「 空 文字 」] と 呼ば れる も の で す 。 


較 論理 値 と null 値 


論理 値 は 、「true」( 真 ) ま た は 「false」( 偽 ) の どちら か を 持っ て いる 値 の こと を 
いい ます 。 こ れ は デー タ の 比較 や 判定 な ど に 用 いま す 。 JavaScript で は C 言 語 と 
異な り 、「1」、「0」 と いっ た も の は 論理 値 と し て 扱い ませ ん 。 

null 値 は 、「 何 も な い 」 こ と を 表す 特別 な 値 で す 。 た と えば 、 定 義 さ れ て いな い 
変数 を 参照 し よう と し た 場合 な ど に null 値 が 返さ れ ま す 。null 値 は 「 何 も な い 」 と 
いう 値 を 持っ て いる た め 、 文 字 列 の と ころ で 出 て きた 空 文字 や 数 値 の 0 と は 異な 
り ま す 。 JavaScript で は 、null 値 は 「null」 と 表現 し ます 。 
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39qanAony 較 





較 変数 の 生成 


JavaScript で 、「2-2 JavaScript で 扱え る デー タ 」 で 解説 し た デー タ を 扱う 
に は 、 変 数 を 用 意 し 、 そ れ に デー タ を 入れ る と いう 手段 を 取り ます 。 変 数 に は 名 
前 が あり 、 あ る 値 を 変数 に 入れ る と 変数 名 で 値 を 参照 する こと が で きま す 。 す な 
わ ち 、 あ る 値 を 入れ る こと の で きる 名 前 の 付い た 箱 が 変数 と いえ ます 。 変数 に 、 
ある 値 を 入れ る こと を 代入 と いい ます 。 


マヤ 変数 に 、 あ る 値 を 入れ る の が 代入 





JavaScript で は 、 変 数 に どん な 型 の デー タ で も 格納 する こと が で きま す 。 この 
変数 を 作る こと を 「 変 数 の 宣言 ] と 呼び ます 。 
変数 の 宣言 は 次 の よう に 記述 し ます 。 


Var 変数 名 : 


変数 の 宣言 は 、「var」 の 後に 変数 名 を 記述 し て 行い ます 。var は 「variable」( 変 
数 ) と いう 意味 で す 。 実際 に 用 いる と 次 の よう に な り ま す 。 


上 記 の よう に 記述 する と 、 ま だ 値 を 持っ て いな い 「sample」 と いう 名 前 の 変数 
が 作成 され ます 。 
変数 の 宣言 と 同時 に 値 を 代入 する に は 、 次 の よう に 記述 し ます 。 


26 


上 記 の よう に 記述 する と 、「sample」 と いう 名 前 の 変数 を 作成 し 、 そ の 中 に 
「Hello] と いう 値 (文字 列 ) を 代入 し ます 。 JavaScript で は 、 あ る 変数 を は じ め て 
使っ た と き に 、 そ の 変数 の 宣言 が 行わ れ た と 解釈 する よう に な っ て いる の で 、 
var に よる 変数 の 宣言 を 行わ ず 、 次 の よう に 記述 し た と し て も 、 同 様 の 結果 を 得 
る こと が で きま す 。 


変数 に 値 を 代入 する に は 等 号 ( ニ ) を 使い ます 。 こ れ は 代入 演算 子 と 呼ば れ ま す 
(P.29 参 照 )。 


還 変数 の 名 前 


プロ グラ ム 中 で は 、 さ ま ざ ま な 処理 を 行う た め に 複数 の 変数 を 用 いま す 。 そ の 
た め 、 変 数 を 何ら か の 方 法 で 区 別 する 必要 が あり ます 。 変数 に 名 前 を 付け る と き 
に は 、 い くつ が 気 を 付け な く て は な ら な いこ と が あり ます 。 


人 @ 大 文字 と 小文字 を 区 別 する 

アル ファ ベッ ト 、 数 字 、 ア ンダ ー ス コア (_) で 構成 され る 
1 文字 目 は アル ファ ベッ ト か 、 ア ンダ ー ス コア () 

人 @ 予 約 語 を 使わ な い 


玉 大 文字 ・ 小 文字 の 区 別 と 文字 構成 
JavaScript で は 大 文字 と 小文字 を 区 別 し ま す 。 変数 も プロ パテ ィ 名 や メソ ッ ド 
名 と 同様 に 、 大 文字 と 小文字 を 区 別して いま す 。 こ の 区 別 は UNIX の 世界 で は 当 
た り 前 の こと な の で す が 、 大 文字 と 小文字 の 区 別 の な い Windows に 慣れ て いる 
と 、 ち ょ っ と 面倒 に 感じ る か も し れ ま せん 。 
大 文字 と 小文字 が 区 別 さ れる の で 、 次 の 変数 名 は それ ぞ れ 別 の も の と し て 認識 
され ます 。 


@SAMPLE 
@Sample 
@sample 
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91AON メ 暑 


変数 は 、 ア ルフ ァ ベ ッ ト 、 数 字 、 ア ンダ ー ス コア (_) を 用 いて 構成 し ます 。 た 
だ し 、 変 数 の 1 文字 目 だ け は 、 ア ルフ ァ ベ ッ ト か アン ダー スコ ア (_) し か 用 いる こ 
と が で き な い 点 に 注意 し て くだ さい 。 


一 予約 語 

JavaScript で は 、 い くつ か の キー ワー ド を 、JavaScript が 使う も の と し て 予 
約 し て いま す 。 こ れ を 予約 語 と いい ます 。 予約 語 は 変数 名 、 関 数 名 と し て 使う こ 
と が で きま せん 。 














人 @ 予 約 語 一 覧 

break case catch continue default delete do 

else finally for function  f in instance 
of new return switch this throw ty 
typeof var void while with 


また 、ECMA-262 で は 将来 予約 語 に な る 可能 性 の ある キー ワー ド と し て 次 の 
も の を 挙げ て いま す 。 こ れ ら も 、 変 数 名 や 関数 名 に 使わ な い 方 が よい で し ょ う 。 


介 殖 来 の 予約 語 一 覧 




















abstract boolean byte char class 

const debugger double enum export 
extends final float goto implements 
int interface long native package 
private protected public short static 

SUDer synchronized throws transient volatile 
較 配列 


配列 と は 、 複 数 個 の 変数 を か た まり と し て 扱え る 型 に し た も の で す 。 表現 と し 
て は 、 変 数 に 添え 字 が 付い た も の で す 。 配列 の 宣言 は 次 の よう に な り ま す 。 


a = new Array (5) : 


この よう に 宣言 する と 、5 個 の 値 を 代入 する こと が で きる 「a」 と いう 配列 が で き 
ます 。 こ の 配列 の 要素 は 、a[0]、a[1]、a[2]、a[3]、a[41 の 5 つ に な り ま す 。 
P.26 の 変数 の 図 で 考え る と 、 次 の よう に 5 つの 箱 が ある こと に な り ま す 。 


8 


い 


配列 名 a | 抽 庄 け | 怠 | | 意 


気 を 付け な く て は な ら な い の は 、 配 列 の 一 番 最初 の 添え 字 は 「0] か ら は じ ま 
る と いう こと で す 。 こ れ は 、Java や C 言 語 な どの 経験 の ある 方 な ら わ か る と 思い 
ます が 、 そ う で は な い 方 に は ビン と こない か も し れ ま せん 。 非常 に 間違い や すい 
の で 注意 し て くだ さい 。 

配列 は 、 数 値 を 使っ て 変数 を 操作 する 場合 に 便利 で す 。 ま た 場合 に よっ て は 配 
列 を 使う こと で スク リプ ト を 簡単 に で きる た め 、 マ スタ ー す る と スク リプ ト の 制 
作 効 率 を 上 げ る こと が で きま す 。 


較 変数 の 処理 


変数 は た だ 値 を た 入れ る だ け で は 意味 が あり ませ ん が 、 変 数 に 対し て 何ら か の 処 
理 を 加え れ ば 、 さ ま ざ ま な こと を 実現 で きま す 。 こ こ で いう 処理 と は 、 変 数 、 演 
算 子 を 用 いて 何ら か の 計算 を 行う こと で す 。 演算 子 に は 、 代 入 演算 子 、 算 術 演算 
子 、 諭 理 演算 子 、 比 較 演算 子 、 条 件 演算 子 、 文 字 連結 演算 子 と いっ た も の が あり 
ます 。JavaScript の 演算 子 の 種類 や 使用 方 法 は 、Java や C 言 語 の 演算 子 と ほ と 
ん ど 同 じ で す 。 


と 


算 子 

代入 演算 子 は 、 あ る 値 を 変数 に 代入 する た め に 使い ます 。 基本 的 に は 、 代 入 演 
算 子 の 右側 に 記述 され て いる 値 や 式 の 結果 な ど を 、 左 側 に 記述 べ ぐれ て いる 変数 に 
代入 する 処理 を 行い ます 。 以 下 に 主 な 代入 演算 子 を 示し ます 。 
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画 算 術 演算 子 
数 値 計算 を 行う 演算 子 で す 。 和 (+)、 差 (-)、 積 (*)、 商 (/) を 求め る 演算 子 の 
他 に 、 割 り 算 の 余り を 求め る 剰余 演算 子 (%) が あり ます 。 


1 
a+b a と b を 足す 
a-b a か ら b を 引く 
a*b a と b を 掛け る 
a/b a を b で 割る 
a%b a を b で 割っ た 余り 


な お 、 商 演算 子 で 割る 数 (b) を 「0] に する と 、 演 算 結果 は 無限 大 (Infinity) が 返 
され ます 。 さ ら に 、 剰 奈 演算 子 で 割る 数 (b) を 「0」 に する と 、 そ の 剰余 は 計算 で 
き な い た め 「NaN](Not a Number) が 返さ れ ま す 。 こ れ ら は 、 計算 上 で トラ ブ 
ル を 引き 起こ す 可 能 性 が ある の で 、 気 を 付け て くだ さい 。 

また 、 上 記 の 演算 子 以外 に も 、 イ ンク リ メ ン ト 演 算 子 (++)、 デ クリ メン ト 演 
算 子 (--) 、 単 項 否 定 と いう 演算 子 が あり ます 。 


a= b++ a に b を 代入 し て か ら 、b の 値 を 1 増やす 

a=++b b の 値 を 1 増やし て か ら 、a に 代入 する 

a=b-- a に b を 代入 し て か ら 、b の 値 を 1 減ら す 

a=-b b の 値 を 1 減ら し て か ら 、a に 代入 する 

a=-b a に b の 符号 を 反転 させ た も の を 代入 する 
一 比較 演算 子 


比較 演算 子 は 、 右 側 と 左側 の 値 を 比較 する と き に 用 いま す 。 比 較 演算 子 を 使っ 
た 式 は 条件 式 と し て 用 いま す 。 主 な 比較 演算 子 を 以下 に 示し ます 。 


Ni 
に 1 に ニー a と b が 等 し いと き に 真 
al!=b a と b が 等 し く な いと き に 真 
a>b a が b よ り も 大 きい と き に 真 
a>=b a が b 以 上 の と き に 真 
a<b a が b よ り も 小さ いと き に 真 
a<=b a が b 以 下 の と き に 真 
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罰 論 理 演算 子 

諭 理 演算 子 は 右側 、 左 側 の 条件 式 を 評価 し て 、 そ れ ぞ れ 成 D 立 っ て いる か どう 
か で true( 真 )、false ( 偽 ) を 返し ます 。 こ れ は 複数 の 条件 式 を 評価 する た め に 用 
いる こと が 多い で す 。 論理 演算 子 を 以下 に 示し ます 。 





還 打 件 演算 子 

条件 演算 子 は 、 こ れ ま で 見 て きた 演算 子 と は 少し 異な り ま す 。 こ れ は 条件 式 と 
2 つの 値 か ら 構成 され 、2 つ の 値 の うち の どちら か が 返さ れる 値 に な り ま す 。 書 式 
は 以下 の よう に な り ま す 。 


(条件 式 ) ? 値 1 : 値 2 


条件 式 の 部 分 は 、 評 価 する と 論理 値 (true ま た は false) が 返る よう な 式 に し ま 


す 。 条 件 式 が 真 な ら ば 、 こ の 式 全体 が 返す 値 が 「 値 1] に 、 偽 な ら ば 「 値 21 に な り ま 
す 。 例 と し て は 次 の よう な コー ド に な り ま す 。 





上 記 の コー ド の 場合 、 変 数 sample の 値 を 評価 し 、 そ の 結果 が 真 で ちる た め 
「sample は 5 以上 」 と 表示 され ます 。 


罰 文 字 列 連結 演算 子 
文字 列 連結 演算 子 (+) は 、 文 字 列 同士 を 連結 する 演算 子 で す 。 書 式 と し て は 次 
の よう に な り ま す 。 


3 う 1 


39qa1Aoy 
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文字 列 1 + 文字 列 2 


上 記 の よう に 記述 する と 「 文 字 列 1] と 「 文 字 列 2」 が 連結 され ます 。 実際 に 用 いる 
と 以下 の よう に な り ま す 。 


上 記 の コー ド で は 、 変 数 chars に 「Hello JavaScript」 と いう 連結 され た 文字 列 
が 代入 され ます 。 


画 演 算 子 の 優先 順位 

演算 子 は 、 同 時 に 用 いた と き に どちら が 先 に 実行 され る か と いう 優先 順位 が あ 
り ま す 。 複雑 な 式 を 記述 する 場合 に は 意識 する 必要 が あり ます 。 

演算 子 の 優先 順位 は 以下 の 順序 で 評価 され ます 。 


1. 括 弧 ( () ) 

2 積 (*) 、 商 (/) 、 剰 余 (%) 

3. 和 ( 十 ) 、 差 (一 ) 

4. 比 較 演 算 子 ( く 、 く < 王 、>、>=) 

5. 等 価 演算 子 (ニー、! 三 ) 

6. 論 理 積 (&&) 

7. 論 理 和 (| | ) 

8. 条 件 演算 子 ( ? ) 

9. 代 入 演算 子 (一 、 十 、 一 三 、*ー、 / 王 、 %) 


玉 演 算 の 順序 の 制御 

すでに 解説 し た よう に 、 演 算 子 に は 優先 順位 が あり ます 。 優先 順位 は 、 通 常 の 
数 学 の 計算 と 同様 に 、 乗 算 ・ 除 算 が 加算 ・ 減 算 よ り も 優先 され ます 。 加 算 、 減 算 
を 乗算 、 除 算 よ り も 先 に 計算 し た い 場 合 に は 「( )」( 括 弧 ) で 囲み ます 。 ま た 、 剰余 
演算 は 乗算 、 除 算 と 同じ 優先 順位 で す 。 次 の よう な 計算 が あっ た と し ます 。 


この 場合 、 括 弧 で 囲ん で いる 「4 二 5] を 計算 し て 、 そ の 結果 に 「3」 を 掛け る こと 
に な り ま す 。 
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人 IIUUUUUUUUUUMUUUUU UL 


正規 表現 


較正 規 表現 と は 


JavaScript で 文字 列 を 扱う こと は 、 つ い 最 近 ま で か な り 面 倒 で し た 。 と いう の 
は 、Perl、Awk な ど と いっ た UNIX の 世界 に お ける 標準 的 な スク リプ ト 言 語 で 実 
装 さ れ て いる 正規 表現 (Regular Expression) が 、JavaScript に は 実装 され て 
いな か っ た か ら で す 。 そ の た め 文 字 列 処理 を 行う と き に は 、1 文 字 ず つ 識 別 し た 
り 、substr メ ソ ッ ド で 文字 を 切り 出し て か ら 処 理 を 行っ た り と 、 結 構 面倒 な 処理 
を 記述 し な く て は な り ま せん で し た 。 し か し 、 JavaScript1.2 (JScript3.0) か ら 
正規 表現 に 対応 し た こと で 、 文 字 列 の 検索 と いっ た こと は か な り 容 易 に 実現 で き 
る よう に な り ま し た 。 

正規 表現 と は 、 文 字 列 が どの よう な パタ ー ン に な っ て いる か を 形式 的 に 表す も 
の で す 。 た と えば 、「Th」 か ら は じ ま る も の (This、The な ど ) は 、「Th*」 と 表現 
し ます 。 こ の よう に 正規 表現 は 、 通 常 の 文字 (az な ど ) と 、「 メ タキ ャ ラク タ 」 と 
いう 特殊 文字 か ら 構成 され る 文字 列 の パタ ー ン で す 。 

正規 表現 は 、 文 字 列 の パターン を 表す も の な の で す が 、 こ れ だ け で は 正規 表現 
を 生か すこ と は で きま せん 。 そ の た め JavaScript に は 、 正 規 表現 を 活用 する た め 
の オブ ジェ クト と 、 い くつ か の メソ ッ ド 、 プ ロバ ティ が 用 意 さ れ て いま す 。 

ここ で は 正規 表現 と 、 そ れ ら を 活用 する オブ ジェ クト 、 メ ソ ッ ド 、 プ ロ パ ティ 
に つい て 解説 し ます 。 


較正 規 表現 の 作成 


正規 表現 で は 、 通 常 区 切り 文字 で パタ ー ン を 囲み ます 。 JavaScript で は 、「/] 
(スラ ッシュ ) を 用 いて 次 の よう な 書式 で 表現 し ます 。 


/ パ ター ン / 


また JavaScript で は 、 も う 1 つ パタ ー ン を 指定 する 書式 が あり ます 。 そ れ は 
RegExp オ ブ ジ ェクト を 使っ て 指定 する 方 法 で す 。 


var ob] = new RegExp( "パタ ー ン ", "フラ グ "): 


フラ グ に は 、 後 述 す る "g"、"i" を 指定 で きま す (P.36 参 照 ) 。 
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39qa1wony 較 


どちら の 方 法 を 使っ て も まっ た く 同 じ で す 。Perl な ど で 正 規 表現 に 慣れ て いる 
人 は 、「/] で パタ ー ン を 囲む 指定 方 法 を 、VBScript な ど で 正 規 表現 を 使っ て いた 
人 は RegExp オ ブ ジ ェクト を 用 いれ ば よい で し ょ う 。 本 書 で は 原則 と し て 「/」 を 用 
いた 書式 を 使い ます 。 

パタ ー ン は 多種 多様 な 指定 が で きま す 。 以 下 に それ ぞ れ 指定 の 仕方 を 解説 し て 
いき ます 。 


一 1 文字 に マッ チ す る 

マッ チ す る 文字 が 、 あ る 特定 の 1 文字 の 場合 に は 、 正 規 表現 と し て 、 そ の 文字 
自体 を 使い ます 。 た と えば 「a」 が 含ま れる 文字 列 を マッ チ さ せ た い と き に は 、 次 
の よう に 記述 し ます 。 


な お 、「/ /] は マッ チ 演 算 子 と 呼ば れる も の で 、 あ る 文字 列 が 正規 表現 で 表現 さ 
れ た パタ ー ン に マッ チ す る か どう か を 調べ る 演算 子 で す 。 

また 、 あ る 1 文字 と 任意 の 1 文字 を マッ チ さ せ た い と き に は 、「.」( ビ ピリ オド) を 
使い ます 。 た と えば 「a」 で は じ ま る 文字 列 を 探し た いと き に は 、 次 の よう に 記述 
し ます 。 


これ に より 「ab」、「at」、「azj」 と いっ た も の が マッ チ し た と 認識 され ます 。 

これ 以外 に 、 あ る 複数 の 文字 の 中 の どれ か に マッ チ す れ ば よい と いう 場合 が あ 
り ま す 。 こ の よう な と き に 使う の が 「 文 字 ク ラス 」 で す 。 文字 クラ ス の 書式 は 、 次 
の よう に な り ま す 。 


[文字 列 ] 


た と えば 、「a」、「b」、「c」 の うち の どれ か 1 文字 が 入っ て いれ ば よい 場 合 に は 、 
次 の よう に 記述 し ます 。 


いう 
「 


SECTION 2-4 を 正規 表現 


また 、「-」 を 使っ て 、 そ の 間 の 記述 を 省略 する こと も で きま す 。 た と えば 、 何 
ら か の 数 字 1 文 字 に マッ チ す る 場合 に は 、 次 の よう に 記述 し ます 。 


[0-91 

さら に 、「 含 まれ て いな い 場 合 ] と いう 否定 的 な 指定 を する 場合 に は 、「^」 を 使 
いま す 。 た と えば 数 字 以外 の 1 文字 に マッ チ し た い 場 合 に は 、 次 の よう に 記述 し 
ます 。 


[^0-9] 


これ 以外 に 、「 略 記法 」 に よる 指定 も で きま す 。 主 な 略記 は 以下 の よう に な り ま 
す 。 


@ 主 な 上 記 法 
\w [a-zA-Z0-9_] アル ファ ベッ ト 、 数 字 、 下 線 
\W [^a-zA-Z0-9 ] アル ファ ベッ ト 、 数 字 、 下 線 以外 
[rytwnyf 連 自 放 0 復帰 文字 、 タ ブ 、 
改行 文字 、 ラ イン フィ ー ド ) 
\S [^ \r\t\n\fl 空白 文字 以外 
\d [0-9] 数 字 
\D [^0-9] 数 字 以 外 
田 複 数 の 文字 に マッ チ す る 


ここ まで は 、1 文 字 に マッ チ す る 場合 を 紹介 し て きま し た 。 し か し 、 こ れ だ け 
で は な く 、 複 数 の 文字 列 に マッ チ す る か どう か を 確認 し た い 場合 が あり ます 。 た 
と えば 、「img]」 で は じ ま り 、 後 に 数 字 が 付い て いる 文字 列 を まとめ て マッ チ さ せ 
た い 場 合 に は 、 次 の よう に 記述 し ます 。 


/1mg[0-9]*/ 
ここ で 気が付く の は アス タリ スク 「*」 で す 。 こ れ は 「0 回 以上 に マッ チ す る 」 と 
いう 意味 で す 。 た と えば 上 記 の 例 で あれ ば 「img」、「img8」、「img 123] な ど に 


マッ チ し ます 。 こ の よう な 記号 を 「 量 指定 子 ] と 呼び ます 。 量 指定 子 に は 次 の よう 
な も の が あり ます 。 


が] 





39qanAony 較 





39qa1AoNy 較 


rar 
ーーl| 


ーー 

Yoo 
ーー siervames 
>teawawans 


川 IM 


人 @ 量 指定 子 
に 0 回 以上 に マッ チ 
1 回 以上 に マッ チ 
? 0 回 、1 回 に マッ チ 
{mj ちょ うど m 回 に マッ チ 
{mj m 回 以上 に マッ チ 
{mnj m 回 以上 n 回 以下 に マッ チ 
還 マ ッ チ する 位置 を 指定 する 


マッ チ を 調べ た い 場 所 が 、 行 の 先頭 だ け と か 行 の 未 尾 だ け と いっ た 場合 が あり 
ます 。 こ の よう な 場合 に は 、「 位 置 指定 子 ] を 用 いて マッ チ す る 位置 を 指定 し ます 。 
これ は 、 単 語 を 調べ る な ど と いっ た と き に 重宝 し ます 。 


人 @ 位 置 指定 子 
人 文字 列 ( 行 ) の 最初 に マッ チ す る 
$ 文字 列 ( 行 ) の 最後 に マッ チ す る 
\Yb 単語 の 境界 に マッ チ す る 
\B 単語 の 境界 以外 に マッ チ す る 
圏 マッ チ す る 奈 件 を 指定 する 


マッ チ を 調べ る と き に 、1 つ だ け マ ッ チ する も の を 探す の か 、 マ ッ チ する も の 
を すべ て 探す の か と いっ た こと を 指定 し た い 場 合 が あり ます 。 ま た 、 通 常 は 大 文 
字 と 小文字 は 区 別 さ れ ま す が 、 大 文字 と 小文字 を 区 別 し た く な い 場 合 も わり ます 。 
この と き に は 、 以 下 の よ うな 修飾 子 で 条件 を 指定 で きま す 。 


@ 条 件 を 指定 する 修飾 子 


9 マッ チ す る も の すべ て を 見 つけ る 
I 大 文字 と 小文字 を 区 別 し な い 


指定 方 法 と し て は 正規 表現 の 後ろ に 付け ます 。 


/a・./g 
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SECTION 2-4 や 正規 表現 


この よう に 指定 する と 、 検 索 対 象 文字 列 か ら 「ab」、「az]、「ac」 な ど を すべ て 
取り 出し ます 。 





較正 規 表現 を 使う 


正規 表現 の パタ ー ン を 指定 する 方 法 は 、 す で に 解説 し まし た 。 で は 、 指 定 し た 
パターン を 用 いて 実際 に 検索 な ど を 行う に は 、 ど の よう に し た ら よ い の で し ょ う 
か ? 正規 表現 を 用 いる 方 法 に は 大 きく 分 け て 2 つ あ り ま す 。1 つ は 文字 列 オブ ジ 
ェクト に 実装 され て いる match メ ソ ッ ド 、replace メ ソ ッ ド 、search メ ソ ッ ド 
な ど を 用 いる 方 法 で す 。 も う 1 つ は RegExp オ ブ ジ ェクト が 持っ て いる メソ ッ ド 
な ど を 用 いる 方 法 で す 。 

文字 列 オ ブ ジ ェクト の メソ ッ ド を 用 いる 方 法 は 、 簡 単に 正規 表現 を 扱う こと が 
で きま す 。 文字 列 オ ブ ジ ェクト の 中 に 次 の よう な メソ ッ ド が あり ます 。 


39qanAoNy 較 


@ 文 字 列 を 検索 し 、 マ ッ チ し た 文字 を 返す 
grOD] .matoh (regExp ) 

@⑯ マ ッ チ し た 文字 列 を 置換 する 
grEOD] .rep1ace (regExp, rep8 ) 

人 @ 文 字 列 を 検査 し 、 マ ッ チ し た 位置 を 返す 
grEOb] . searoh (regExp ) 


これ ら は どれ も 、 パ ター ン を 引数 に 取り 、 マ ッ チ 処理 、 ま た は 置換 処理 を 行い 
ます 。 マ ッ チ 処理 の サン プル は 次 の よう に な り ま す 。 


<htm1 > 

< ヒュ 上 1e>RegExD ma ヒ Ch</ モ 1 ュ ヒ 1e> 
<body bgco1or="#EEE8do"> 
<h3 >ReqgExD SBea エ Ch</h3> 

<hr /> 


<8C エ pt 1anguadG= "aa8C エ ip 上 "> 


3 の 


ョ 9q ヨ 1AONY 肖 


Yar myReg = /a./: 

Ya エ 8B エ = "ava8C エ rip" 

doocument .write( "検索 対象 =: " + St エ + "<br />"): 

document . wiEe( "検索 文字 : " + myReg.Source + 
回 "<br />")』 

上 Match = g エ .matoh(myReg) : 

trSearoh = gtr.search (myReg) : 

document .write ( "matoh- 返 され る 値 :" + gtrMatoh + 
回 "<br />『"): 

dooument .write ( "gearoh- 返 され る 値 :" + gtrSearoh) : 
</ BCrip セ > 
</body> 
</htm1 > 


この サン ブル を 実行 する と 、 次 の よう に 表示 され ます 。 


等 ReeExp match - Microsoft Internet Explorer 


3 ァイル 編集 ) 表示 お 気 に 和 ツー ル (D へ 


RegExp search 


検索 対象 . Javascript 
検索 文字 . a 

match- 返 され る 値 av 
search- 返 され る 値 1 





2-5 


条件 に よっ て 処理 を 変え る 


ここ まで で 式 や 論理 式 の 記述 方 法 を 解説 し て を た の で 、 こ れ ら を 使っ て より プ 
ログ ラム らし い ス クリ プ ト を 記述 し て み ま し よう 。 

ある 式 (比較 式 な ど ) が 条件 式 の 条件 部 分 に な る と 説明 し まし た 。 ま た 条件 演算 
子 は 条件 の 真 、 偶 と いう 2 つの 値 の どちら が 返さ ぐれ る か と いう 簡単 な 条件 選択 を 
実現 する こと が で きま す 。 し か し 、 こ れ ら の 方 法 で は 上 か ら 下 へ と 流れ る 直線 的 
な プロ グラ ム の 流れ を 変え る こと は で きま せん 。 そ こ で 、 条 件 に よっ て 処理 を 変 
えた り 、 繰 り 返し の 処理 を 行っ た りす る 方 法 を 解説 し ます 。 


同和 件 分 岐 


if 一 else 文 (条件 文 ) を 式 と 組み 合わ せ て 使う と 、 条 件 に 応じ て 処理 を 分 岐 させ 、 
プロ グラ ム の 流れ を 変更 する こと が で きま す 。if 一 else 文 に は 何 パ ター ン か の 記 
述 方 法 が あり ます 。 ま ず 、 一 番 簡 単 な if を 用 いた 文 は 次 の 方 法 で 記述 し ます 。 


1f( 条件 式 ) 
処理 


この よう に 記述 する と 、 条 件 が 真 な ら ば 処理 を 行い 、 偽 な ら 処理 を 実行 せ ず に 
次 の 行 へ 移り ます 。 ま た 、 こ の 処理 の 部 分 は 中 括弧 ({ }) を 用 いて 処理 を 複数 実行 
させ る こと も で きま す 。 


1f( 条件 式 ){ 
処理 1 
処理 2 


… う 


逆 に 処理 が 1 つ な ら ば 中 括弧 を 省略 で きま す 。if 文 を 用 いた サン プル は 次 ペー 
ジ の よう に な り ま す 。 こ の サン ブル で は 条件 が 真 と な る の で 、 次 ペー ジ の 図 の よ 
うに 中 括弧 内 の 処理 が 行わ れ て いま す 。 
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39qanAoy 較 


39qanAoN 較 


<htm1 > 

< 上 1 上 1e>1 人 1</ 上 ユミ 上 1]@> 
<body bgCo1o エ =" 韻 EFFBdC"> 
<h3> 条 件 分 岐 1F 1</h3> 

<hr /> 


<8Cr1ip 1anguaqde="aYa8Cript 上 "> 


店 

Yar myCo1or="b1ue" ょ : 

if (myCo1or=="b1ue" ) { 

documen .write ("<Eon モ co1or=*b1ue* > 今日 は 青い 服 

回 を 着 て いこ う </Eont>" ) 

} 
//ー-<> 
< く / BCr1p セ > 
</bod マ > 
</htm1> 


午 ifl - Microsoft mternet Explorer 


ファ イル (F) 編集 CE) 表示 ) お 気に入り ⑱) ツー ル ① へ ヘルプ 


| 条件 分 岐 if1 


今日 は 青い 服 を 着 て いこ う 





も し も 上 記 サ ンプ ブル で 変数 「myColor」 の 値 を 「blue] で は な く 「red」 と する と 、 
条件 式 が 偽 と な っ て し まう た め 何 の 処理 も 行わ れ ま せん 。 

この よう に 単純 な 分 岐 は if だ け で も 記述 で きま す が 、 条 件 式 が 偽 の と き に も 何 
ら か の 処理 を 行い た い 場 合 は 、 次 の よう に else も 用 いま す 。 


1f( 条件 式 ){ 

処理 1: - 二 ーーーーーーーーーーー 単数 で も 複数 で も か まわ な い 
} 
else { 

処理 2: -<ーーーーーーーーーーーーー 単数 で も 複数 ども か まわ な い 
} 
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SECTION 2-5 多 条件 に よっ て 処理 を 変え る 


この 場合 、 条 件 が 真 の と き に は 処理 1 が 、 偽 の と き に は 処理 2 が 行わ れ ま す 。 
felse 文 を 用 いた サン プル は 次 の よう に な り ま す 。 





<htm1> 

< ヒュ 上]1e>1E2</ 上 11@> 
<body> 

<h3> 条 件 分 岐 1F 2</h3> 
<hr /> 


39qa1Aoy 較 


<8Cript 1anguag@= "aYaS8Cr1pt 上 "> 
<『 ニ ェ 
Yar myCo1or="red"』 
1f (myCo1or=="b1ue"){ 
document .write( "<Fon モ Co1or='b1ue!> 今 日 は 青い 服 
回 を 着 て いこ う </Eont>") 
} 
e1gse{ 
document .write("<Eon モ Co1or='red'> 今 日 は 赤い 服 
回 を 着 て いこ う </Eont>" ) 
} 
/ ソ = 
< く / 8Cr1p キ > 
</bodY> 
</htm1 > 


この サン ブル で は 条件 式 が 偽 と な り ま す 。 そ の た め else に 記述 され て いる 処理 
が 実行 され ます 。 実行 結果 は 次 の よう に な り ま す 。 


講 if2 - Microsoft Imternet Explorer 
プイ ル (E) 編集 E) 表示 ) お 気に入り ツー ル ① ハル プ ⑪ 





| 条件 分 岐 2 


今日 は 赤い 服 を 着 て いこ う 





現実 に は も っ と た くさ ん の 分 岐 を し た い 場 合 も あり ます 。 そ の 場合 に は if と 
else を 組み 合わ せ て 、 さ ら に 複数 の 条件 式 を 評価 で きる よう に し ます 。 
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39qa1AoNx 較 


if( 条件 式 1 ){ 
処理 

} 

else if( 条件 式 2 ){ 
処理 2 : 

} 

ese if( 条件 式 3 ){ 
処理 3 


elset 
処理 n: 


この よう に 記述 する と 任意 の 数 の 条件 を 評価 する こと が で きる よう に な り 、 複 
雑 な 条件 分 岐 が 行え る よう に な り ま す 。 し か し 、 上 記 の 記述 を 使う 場合 に 気 を 付 
け な く て は な ら な いこ と が あり ます 。 た と えば 、 条 件 式 1 で 真 と な る と 、 処 理 1 が 
実行 され た 後 、if 一 else 文 で 書か れ た コー ド 全 体 を 抜け こし まう こと で す 。 








ヤ 真 に な っ た 時 点 で 条件 式 を 抜け る 
a=2 
偽 1f (a==1 ) { 
処理 1 : 
真 e1se if(a==2) { 
処理 2 : 
} 
e1se if (a==3 








処理 3 : 


条件 式 2 で 真 } 
に な っ た の で 、 else{ 






評価 も 処理 も 
され な い 


| 処理 4 : 





[ 
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この 図 で も わか る よう に 、f 一 else 文 で は 、 あ る 条件 式 で 真 に な っ た ら そ の 部 
分 の 処理 を 行い 、 そ れ 以 降 の 条件 式 は 評価 も 実行 も し ませ ん 。 

それ で は 、 書 いた 条件 式 を すべ て 評価 し て ほし い 場 合 に は 、 ど うし た ら よ い の 
で し ょ うか ? 解決 法 は 簡単 で す 。 次 の よう に 記述 し ます 。 


1f( 条件 式 1 ){ 
処理 1 

} 

if( 条件 式 2 ){ 
処理 2 


この よう に 記述 する と 条件 式 を すべ て 評価 し 、 真 に な っ た 部 分 の 処理 を すべ て 
行う こと に な り ま す 。 


ヤマ 記 述 す る 条件 式 を すべ て 評価 する 


a=2 


表 真 - if (a==2) { 
処理 1 : 
) [ 





偽 > 1E (a==3) { 
。 半 評価 は され る が 
} 
真 > if (az1) { 


処理 の 流れ 


処理 3 : 
} 比較 











43 


39qa1AoNy 較 


39qanon 較 


還 繰り 返し 処理 


これ まで に 簡単 な プロ グラ ミン グ を 実現 する if 一 else 文 を 解説 し まし た 。 し か 
し 、 こ れ ら は スク リプ ト の 行 が それ ぞ れ 1 回 し か 実行 され ませ ん で し た (if 一 else 
文 の 場合 に は 実行 され な い 行 も ちり ます )。 し か し 、 プ ログ ラミ ング を し て いる 
と 、 同 じ 行 ( 処 理 ) を 複数 回 繰り 返し た いと いう 状況 が 発生 し ます 。 こ れ を 実現 す 
る の が 繰り 返し 処理 で す 。 こ の 処理 を 「 ル ー プ 」 と 呼び ます 。 ル ー プ に は 2 種類 あ 
り ま す 。1 つ は 条件 に 基づい て その 条件 が 満た され る まで 繰り 返す も の 、 も う 1 つ 
は 設定 され た 男 囲 を 超え る まで 繰り 返す も の で す 。 


一 for 文 を 使っ た ルー プ 

for 文 を 使っ た ルー プ は プロ グラ ミン グ の 世界 で は 非常 に 基本 的 な も の で 、C 言 
語 を は じ め 、Basic、Perl、Java な ど に も 同様 の 仕組 み が 実装 され て いま す 。 

for 文 を 使っ た ルー プ は 、 基 本 的 に 指定 し た 回 数 だ け 処理 を 繰り 返す の に 用 い 
られ る こと が 多い で す 。 

for 文 は 次 の よう に 記述 し ます 。 


for( 初期 状態 , 終了 条件 , 継続 処理 ){ 
処理 


サン プル と し て は 、 次 の よう に 記述 する こと が で きま す 。 





これ は 、 初 期 状 態 は 「i が 1」、 終 了 条 件 は 「i が 10 に な っ た と き 」、 繰 り 返し ご と 
に 「i に 1 を 足し て いく 」 と いう for 文 で す 。 こ れ に より i が 1 か ら 10 に な る まで 「 処 
理 1] を 10 回 繰り 返す て と が で きま す 。 こ の と き i を 「 カ ウン タ ]」 と 呼び 、 数 を 数 え 
る の に 用 いま す 。 ま た 、 条 件 は ルー プ の 最初 に 評価 され ます 。 継 続 処 理 は 、 ル ー 
プ 内 の 処理 が 終わ り 次 の ルー ブ に 入る 前 に 実行 され ます 。 次 は 、for 文 を 使っ た 
サン プル に な り ま す 。 
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SECTION 2-5 を 条件 に よっ て 処理 を 変え る 


<htm1 > 

< も 1 上 1e>For 1</ モ 上 ュ モ 1e> 

<body bgoo1or="#EFF8do"> 

<h3 >For 文 で 繰り 返し 処理 が 行わ れ ま す </h3> 

<hr /> 

<8Crip 1anqguage= "JaVa8Cript リ "> 

イー 

For (=1: エ <=7 エミ ォ オォ) ( 
document .w エ ite ("<EOn 81Zze="+ ュ ミ +">He11o 

回 </font>< br />"): 

} 

た / ニ = テ 

</ 8C エ ip セ > 

</bodY> 

</htm1 > 


この スク リプ ト を 実行 する と 、 次 の よう に 表示 され ます 。 


色 for 1 - Microsoft Internet Explorer 
プイ ル (E) 編集 GE) 表示 (V) お 気 に 入 D(@) ツー ル ) ヘル プ ⑪ 


aa8oript! 





for 文 で 繰り 返し 処理 が 行わ れ ま す 


Hello JavaSoript 
Hello JavaScript! 


Hello JavaScriptl 
Hello JavaScnptl 


Hello JavaScript! 
Hello JavaScript! 


Hello JavaScript! 





も し も for 文 を 使わ り ず に この Web ペ ー ジ を 書い た と し た ら 、 非 常に 面倒 な こと 
に な る の は 容易 に 想像 で きる と 思い ます 。 他 に も 文例 を 挙げ て お きま し ょ う 。 


@i を 0 か ら は じ め 、10 よ り 小 さい 間 、i を 1 ずつ 加え な が ら 繰 り 返す 


for( せよ =0 : も <10 7: ミ ++ ) 
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@i を 10 か ら は じ め 、20 以 下 の 間 、i を 1 ずつ 加え な が ら 繰 り 返す 


@i を 10 か ら は じ め 、0 よ り 大 きい 間 、i を 1 ずつ 減ら し な が ら 繰 り 返す 


@| を 0.0 か ら は じ め 、1.0 以 下 の 間 、i を 0.2 ず つ 加 えな が ら 繰 り 返す 


田 for 文 を 使っ た ルー プ で の 注意 

for 文 は 非常 に 便利 な も の で す が 、 プ ログ ラミ ング 次 第 で は 深刻 な エラ ー を 引 
寺 起 こし ます 。for 文 の 後ろ の 「( )」 の 中 に 条件 を 書く の で す が 、 こ こ で 終了 条件 
を 誤る と いつ まで た っ て も ルー プ が 終わ ら ず 、 ス クリ プ ト が 終わ ら な いと いう こ 
と が 起き ます 。 こ れ を 「 無 限 ルー プ 」 と 呼び ます 。 

無限 ルー プ は プロ グラ ム 上 有効 な 場合 も わる の で す が 、 意 図 し な い 場 合 は 深刻 
な エラ ー 以 外 の 何 も の で も あり ませ ん 。 こ の よう な エラ ー を 避け る た め 気 を 付け 
な く て は な ら な い の は 、 終了 条件 の 記述 の 仕方 で す 。 終了 条件 で 使え る 演算 子 は 、 
次 の 4 種類 で す 。 


これ 以外 の 演算 子 で は ほとん ど エ ラー と な り ま す の で 、 使 わな いよ うに し まし 
よう 。 ま た 条件 の 設定 は 必ず 真 に な る も の に し て くだ さい 。 


画 for 一 in 文 を 使っ た ルー プ 

for 文 を 使っ た ルー プ は 一 般 的 な も の で す が 、 JavaScript で は さら に 拡張 を 行 
い 、for 一 in 文 と いう 仕組 み を 実装 し て いま す 。for 一 in 文 を 使っ た ルー プ は オブ 
ジェ クト の すべ て の プロ パテ ィ に 自動 的 に アク セス する た め に 使わ れ ま す 。 for 
ーin 文 の 記述 は 以下 の よう に な り ま す 。 


for( カウ ンタ in オブ ジェ クト 名 ){ 


処理 
} 
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SECTION 2-5 条件 に よっ て 処理 を 変え る 


カウ ンタ は 0 か ら オ ブ ジ ェクト の プロ パテ ィ が ある 間 、1 す ずつ 足 さ れ て 繰り 返し 
を 行い ます 。 サ ンプ ル は 次 の よう に な り ま す 。 





<htm1 > 

< 上 1 上 1e>Fo エ 1n 1</ 上 1 上 1e> 
<body bgCo1o ェ =" 提 FE8do"> 
<h3>Eor in</h3> 


39qanAony 較 


<hr /> 

<8Cr1ipt 1anguagd@e="aYa8C エ ipt 上 "> 

<! ニ = ニニ 

Eor (1 in navigatcr) { 
document .write (navigaEor [1] ) 
document .write("<br />"): 

} 

が / れ は 

</ BCript> 

</body> 

</htm1> 


上 記 の スク リプ ト を 実行 する と 以下 の よう に な り ま す 。 こ の スク リプ ト で は 
navigator オ ブ ジ ェクト の プロ パテ ィ 一 覧 を 表示 し て いま す 。 


マ IE6 の 表示 


強 forin 1 - Microsoft Internet Explorer 


イル) 編集 GE) 表示 ) お 気に入り ツー ル (①) ヘル プ ⑪ 
for in 





Mczilla 

Microsof Internet Explorer 

0 

x86 

Win32 

undefined 

undefined 

urndefined 

HE1 

E 

40(compatible: MSIE 6.0: Windows NT 5.1》 
Mozila/4.0 (compatible: MSIE 6.0: Windows NT 5.1) 
true 

true 

undefined 
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NN6 で の 表示 


皿 forin 1 - Netscape 6 同 回 四 


四 フル ⑧ 編集 E) 表示 () 検索 ⑤) ジャ ンプ @) ブッ クマ ー ク (B) タス 2(①D ヘル プ ⑬ 





[eljee MimeTypeArray] 
Win32 


Windows NT 5.1 


Gecka 
20011019 
[object PluginArray] 


Mozilla/5.0 (Windows ee 1: ja-P: rv:0.9.4) 
NR 着 90ong57B 


は javaFnabled() [ [natiye c 2 
fumction taintFnabled() {| ie codg] 1 
fumction preference() [ [native code] 





これ は スク リプ ト 制 作 時 に プロ パテ ィ の 一 覧 を 表示 し た い 場 合 や 、 プ ロバ ティ 
の 番号 が わか ら な い 場 合 な ど に 役に立ち ます 。 な お NN で は 未定 義 の プロ バテ ィ 
に つい て は 表示 し な いた め 、 表 示 結 果 が IE と NN で は 異な り ま す 。 


圏 while 文 を 使っ た ルー プ 

繰り 返し 処理 を 実現 する 他 の も の と し て 、while 文 に に よる ルー プ が あり ます 。 
while 文 に よる ルー プ は 、 あ る 条件 が 真 で ある 間 ル ー プ を 繰り 返す も の で す 。 
while 文 の 形式 は 以下 の ひよ うに な り ま す 。 


while( 条件 ){ 
処理 


条件 に は 、 論 理 値 (true ま た は false) を 返す 条件 式 な ら ば 、 ど の よう な 式 で も 
書く こと が で きま す 。 実際 の サン プル は 次 の よう に な り ま す 。 





SECTION 2-5 を 条件 に よっ て 処理 を 変え る 


<hr /> 
<8BC エ tp 上 1anguad@= "aa8C エ ip モリ" ッ > 
ンコ 
Ya エ =0: 
Wh1i1e (<=7 ) { 
document .write ("<Eont 81ze="+ ュ +">He11o 
名 JavaSor1p !</EFon セ ><br />") 
ユエ ++』 
} 
7 コッ 
</ 8C エ ipt> 
</body> 
</htm1 > 


この サン ブル は 「i」 が 0 か ら 7 に な る まで 繰り 返さ ぐれ ます 。「i= ニ 8] に な っ た 時 点 
で while 文 の 条件 式 が 偽 と な る の で ルー プ か ら 抜 け ます 。 条 件 式 だ け で 繰り 返し 
を コン トロ ー ル し た い 場 合 に 役に立ち ます 。 


圏 break 文 と continue 文 

for 文 と while 文 に よる ルー プ を より 使い や すく する た め に 、JavaScript は 
break 文 と continue 文 を 用 意 し て いま す 。 こ れ ら の 文 は 、for 文 や while 文 の 
持っ て いる 終了 条件 だ け で な く 、 繰 り 返し 処理 中 に 何ら か の 条件 が 成立 し た ら ル 
ー ブ プ の 動作 を 変え る と いつ た 目的 の た め に 使わ れ ま す 。 

break 文 は 、 ル ー プ が 終了 し て いな く て も この 命令 が 実行 され る と ルー プ か ら 
抜け 出し ます 。 サンプル は 次 の よう に な り ま す 。 


<htm1 > 
< 上 1 上 1e>break< / 二 1 上 1e> 
<body bgco1or=" 失 EEE8doc"> 
入力 で きる チャ ンス は 3 回 で す 。 
<hr /> 
<S8Cript 1anguade= "aa8C エ ip 上 "> 
そま ニー 
Ya エ CO エエ GC ヒ =Mah . round ( 5*Math . random( ) ) : 


for (1=0: エ <3 エミ ++ ォ ) { 
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an8wer=prompt ("0 か ら 5 の 整数 を 入力 し て くだ さい ","『): 
1F (anSwe エ == ニ CO エエ @GCt ) { 

a1ert ("正解 で す 。" ) 

break: 


} 
// ニ ー> 
< く / BC エ Fip セ > 
</bod マ > 
</htm1> 


この スク リプ ト を 実行 し た 結果 は 、 次 の よう に 表示 され ます 。 





PE 7 







Microsoft Internet Explorer 
















入力 で きる チャ ンス (は 3 














Explorer ユー ザー ブロ ンプ ト 






ス の フト ブロ ン ナ ト 
0 が 55 の 整 痢 を 入力 し て くだ さい 


E 















この スク リプ ト は 0 か ら 5 の 整数 を 生成 させ て 、 そ の 値 を あて る も の で す 。 整数 
の 生成 に は 乱数 を 使っ て いる た め 、 そ の 値 は 毎回 変わ り ま す 。 答 えら れる 回 数 は 
for 文 を 使っ て 3 回 に 制限 し 、 こ こ で プロ ンプ ト に 入力 し た 整数 が 正答 だ っ た と き 
に は i 文 の 条件 が 真 と な り 、 画 面 に アラ ー ト で 「 正 解 で す 。」 と 表示 し て 、break 
文 に よっ て ルー プ を 抜け て 処理 を 終了 する スク リプ ト で す 。 

continue 文 は 、 ル ー プ 中 に この 命令 を 実行 させ る と その ルー プ 処 理 を 中 断 し 、 
いっ た ん ルー プ 処 理 の 先頭 に 戻り ます 。 こ こ で 継続 処理 を 行っ て か ら 次 の ルー プ 
に 入り ます 。break 文 と 異な る の は 、 ル ー プ を 抜け こし まわ な いと ころ で す 。 
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PU 


例外 処理 


プロ グラ ム に は バグ が 付き も の で す 。 ど ん な に 気 を 付け て いて も 、 ど ん な に 優 
秀 な プロ グラ マ で あっ て も 、 こ れ は 避け られ な い 問 題 で す 。 さらに 、 ユ ー ザ ー は 
プロ グラ マ が どん な に 想像 を めぐ ら せ て も 、 思 い 付 か な い 動 作 を し ます 。 こ うい 
っ た バグ や 、 動作 に より 引き 起こ され る 問題 を 、 簡 単に プロ グラ ム 上 で 処理 で き 
る よう な 機構 が 組み 込ま れ ま し た 。 そ れ が 、「 例 外 処理 ] で す 。 例 外 処 理 は 、 問 是 
が 発生 し た 際 に 動作 し ます 。 

JavaScript で 例外 処理 が 扱え る よう に な っ た の は 最近 の こと で す 。Java 
Script1.3 か ら 例 外 処理 を 扱え る よう に な っ て いま す 。 そ の た め 、 こ れ ま で は 多 
く の ブ ラウ ザ が 対応 し て いな か っ た た め 、 例 外 処理 を 用 いる こと は ほとん ど あ り 
ませ ん で し た 。 

し か し 、 例 外 処 理 を 使え ば 、 プ ログ ラム の 生産 性 を 上 げ る こと が で きま す 。 例 
外 処理 を 用 いな い ス クリ プ ト で は 、 検 出し た い エ ラー ご と に その 処理 を 記述 し 、 
さら に それ を 処理 の 近く に 記述 し な く て は な り ま せん で し た 。 し か し 、 例 外 処 理 
で は 、 例 外 を 検知 し た と き の 処 理 を 「catch 文 ] に まとめ て 記述 で きる た め 、 正 常 
時 の 処理 と 例外 処理 を きれ い に 分 離 で を ます 。 こ れ は 、 プ ログ ラム 制作 時 の 効率 
だ け で な く 、 メ ン テ ナ ンス が 発生 し た 際 の プロ グラ ム の 理解 に と っ て 非常 に 有効 
で す 。 そ の た め 、 例 外 処 理 は 可能 な 限り 用 いる べき で し ょ う 。 


還 例外 処理 の 実装 
例外 処理 を 実装 する に は 以下 の よう な 構文 用 いま す 。 


try{t 
処理 


catch( 例 外 ){ 
例外 処理 : 


上 記 の コー ド で は 、try 文 で の 後ろ の 中 括弧 「{ j] の 中 に 、 例 外 の 発生 を 検知 す 
る 必要 の ある 処理 を 記述 し ます 。 こ の 処理 中 に 問題 が 発生 し た 場合 に は 、 例 外 が 
投げ られ ます 。 こ の 例外 を 受け 取る の が 、catch 文 で す 。catch 文 で は 、try 文 で 
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39qa1AoNy 識 


発生 し た 例外 を 受け 取り 、 引 数 の 部 分 で 処理 し ます 。 慣 例 と し て は 「e」 を 用 いる 
こと が 多い よう で す 。 try 文 に は 少な く と も 1 つの catch 文 、 ま た は finally 文 が 必 
要 と な り ま す 。 こ れ が な い 場 合 に スク リプ ト エ ラー に な り ま す 。 

実際 に 例外 処理 の スク リプ ト を 作成 し て み ま し ょ う 。 ま ず は 例外 処理 を 行っ て 
いな い ス クリ プ ト を 見 て くだ さい 。 以 下 の プ ログ ラム で は document オ ブ ジ ェ 
クト の write メソ ッ ド の 綴り が 間違っ て いま す 。 そ の た め 、 ス クリ プ ト エ ラー が 
発生 し ます 。 


<htm1 > 
< 上 it1e>ExCept 上 ion</ 上 it 上 1e> 
<body bgoo1or=" 提 EEE8do"> 
<h3> 例 外 処理 </h3> 
<hr /> 
<8or1pt 1anguage= "avagcript"> 
く 】= こ = 
dooument .wrte( "Error 1ine"): 
7 ar 
</ BCrip セ > 
</bod マ > 
</htm1> 


マヤ IE6 で 表示 され る エラ ー 


放 mternet Explorer 
バージ に 問題 が ある た め 、 正しく 表示 また は 機能 し な く な る 可能 性 が あり 
⑳ ます 。 今後 、 ス テー タス バー に 表示 され た 警告 アイ コノ を ダブ ルカ リッ する と 、 
こ て の メッ セー ジ を 表示 で きま す 。 


ペー ジ に エラ ー が ある と き は 、 こ の メッ セー ジ を いつ も 表示 する (@) 


| 詳細 を 呈す ⑪) < 


ライ ン 8 


文字 2 
エラ ー オ ブツ ェ クト で サポ ー ト され て いな い プ ロバ ティ (また は メッ ド で す 。 
ー ド 0 


= 
URL file://CtempWerror-exceptionhtml 





それ で は 、 こ の コー ド に 、 例 外 処理 を 組み 込ん で み ま し ょ う 。 ス クリ プ ブ ト は 次 
の よう に な り ま す 。 


SECTION 2-6 例外 処理 


<htm1 > 

< 上 it 上 1e>ExCept 上 ioOn</ 上 1 上 1e> 
<body bgoo1or="#EEE8dC"> 
<h3 > 例外 処理 </h3> 

<hr /> 





<8Cr1pt 1anguad@e= "aa8C エ 1pt"> 


ドー 
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tryt 
document .WrEe ("Error 1ine"): 
は 
catoh(e){ 
document .Wr1Ee("E エ TOF: " + @ + "<Dr />" )』 
1 
リル っ 
</ 8C エ ip セキ > 
</body> 
</htm1> 


例外 処理 は すでに 解説 し た と お り 、try 文 、catch 文 に より 実装 され ます 。 問 是 
の 起こ り そ う な 部 分 を try 文 で 囲み 、 対 応 し た 例外 処理 を catch 文 内 に 記述 し ます 。 
上 記 プ ログ ラム で は 例外 の 内 容 を 表示 し て いま す 。 実行 結果 は 次 の よう に な り ま す 。 


E 1 Exception - Microsoft Internet Explorer 
ファ イル (CE) 編集 E) 表示 ) お 気に入り (@) ツー ル ① ヘル プ ⑬ 壮 








例外 処理 は 、 入 れ 子 に し て 記述 する こと も で きま す 。 そ の た め 、 複 雑 な 処理 に 
対し て 例外 処理 を 組み 込む こと が で きま す 。 
また 、 例 外 処理 の try 文 、catch 文 の 処理 を 終了 し た 後に 行う 処理 を finally 文 
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に より 記述 で きま す 。finally 文 は 例外 処理 が 行わ れる 、 行 われ な い に 関 わら ず 、 
try 文 と catch 文 の 処理 が 終了 し た 段階 で 実行 され ます 。 
実際 の コー ド は 次 の よう に な り ま す 。 


<htm1 > 
< 上 1 上 1e>ExCeption 上 hrow< / 上 1 上 1e> 
<body bgco1or=" 失 EEFBdoC"> 
<h3 >Throw</h3> 
<hr /> 
<8Cr1ipt 1anguad@e= "aYa8C て ip 上 "> 
<! ーー 
try { 
throw "myExCepttion": 
} 
catoh (e) { 
document .write ("Errori " + G+ "<br />")』 
} 
Eina11y{ 
document .write ("done 上 エッ -oatoh gtatemen" ) : 
} 
// ユ = デ と 
</ Cr1p セ > 
</body> 
</htm1 > 


上 記 の コー ド で は 例外 処理 を 終了 し た 後に 、finally 文 内 を 処理 し ます 。 実行 結 
果 は 以下 の よう に な り ま す 。 


E ] Exception throw - 聞 icrosoft Internet Explorer 回 回 図 
: ファ イル (E) 編集 (CD 表示 ) お 気 に 和 D⑧ ウー ル ① ヘル プ ⑬ し 』 


Throw 


Error: myException 
done try-catch statement 





54 


SECTION 2-6 @ 例外 処理 


剛 例外 を 発生 する 


これ まで は 、 例 外 を 処理 する 方 法 を 解説 し て を まし た 。 し か し 、 こ れ だ け で は 
まだ 思い どおり に 例外 処理 を 使い こなす こと は で きま せん 。 そ こ で 必要 と な る の 
が 、 例 外 を 発生 させ る 方 法 で す 。 ス クリ プ ト 中 で 例外 を 発生 させ る こと が で きれ 
ば 、 エ ラー 処理 な ど が 楽に な り ま す 。 

例外 を 発生 させ る に は 、throw 文 を 用 いま す 。throw と いう くら いな の で 、 
日 本 語 で は 「 例 外 を 投げ ける] など と も いい ます 。 こ の 発生 し た 例外 を 受け 取る の が 
catch 文 な の で す 。 

throw 文 の 記述 は 以下 の よう に な り ま す 。 


try{ 
処理 
throw 『" 式 ": 
} 
catch( 例 外 ){ 
例外 処理 : 


throw 文 は 引数 と し て 式 を 指定 し ます 。throw 文 の 引数 に は 、 ど の よう な 式 
で も 記述 する こと が 可能 で す 。 引 数 に 設定 され た 式 は 、 例 外 を 識別 する た め に 使 
われ ます 。 


<htm1> 
< 上 tit1e>Exception 上 hrow</ 上 1 上 1e> 
<body> 
<h3>Throw</h3> 
<hr /> 
<SCript 1anguade= "ava8cr1p 上 "> 
<!ーー 

try { 

throw "myExCeption": 
} 
catch (e) { 


document . write ("Error: " + @ ): 


D ゆ 


39qa1woNy 





39qa1AoN 較 


} 

の ん ぱ ャ の 

</ 8C エ rip 上 > 
</bodY> 
</htm1> 


実行 結果 は 次 の よう に な り ま す 。 


講 Exception throw - Microsoft Internet Explorer 


ファ イル 任 ) 編集 E) 表示 び ) お 気に入り (⑱) ツー ル ① ヘル プ い 





| Throw 


Error: myException 





賠 例外 処理 の 注意 


ここ まで 解説 し た よう に 、 例 外 は 実際 に プロ グラ ム を 記述 する 際 に は 便利 な も 
の で す 。 し か し 、 例 外 処理 に は 注意 する 点 が あり ます 。 

まず 、 最初 に 触れ た よう に 、 JavaScript が 例外 処理 を 実装 し た の が 最近 の た め 、 
実装 し て いな い Web ブ ラウ ザ が あり ます 。 現在 例外 処理 を サポ ー ト し て いる の 
は 、IE5 以 降 と NN6 で す 。 さ ら に 困っ た こと に 、IE と NN で は 例外 処理 の 実装 が 
若干 異な り ま す 。 そ の た め 、 ど ちら の Web ブ ラウ ザ か を 限定 で きれ ば 問題 な く 
使う こと が で きま す が 、 両 方 で 使う よう に 記述 する 場合 に は 、 例 外 処 理 を 分 離す 
る こと ぐら い に し か 使え な いよ う で す 。 


56 





プロ グラ ム や スク リプ ト を 書い て いる と 、 同 じ よ うな 処理 が 何 度 も 出 て くる こ 
と が あり ます 。 こ の よう な と き に 、 同 じ 処 理 を 何 度 も 記述 する の は と て も 面倒 だ 
し 、 効 率 も 悪く な り ま す 。 そ ん な と き に は どう すれ ば よい の で し ょ うか ? この 
問題 を 解決 する の が 関数 (ファ ンク ショ ン ) と 呼ば れる 機能 で す 。 関 数 は ある 一 連 
の 処理 を まとめ る た め の も の で す 。 






男 。/ 使い 回 し が 
/ で きる 


た と えば 、 上 の 図 の よう に いく つか の 処理 が 行わ れる 中 で 、 同 じ 処 理 が 繰り 返 
し 出 て くる 場合 、 処 理 の 流れ に 沿っ て 毎回 記述 し て いる と 非常 に 長い コー ド に な 
り 、 コ ー デ ィング に も 時 間 が か か っ て し まい ます 。 

そこ で 、 処 理 単位 ご と に 関数 を 作っ て 呼び 出せ る よう に し て お く と 、 何 度 も 同 
じ 処 理 を 記述 する 必要 が な く な り 、 す っ きり と し た スク リブ ト が 作成 で きま す 。 
関数 は 、 メ ソ ッ ド な ど と 同様 に 引数 を 取り 、 処 理 を し た 結果 を 返し ます 。 


較 関数 の 定義 
関数 は 「function] を 用 いて 定義 し ます 。 こ の 定義 に は 、 関 数 の 名 前 と 関数 に 


渡す 引数 リス ト 、 関 数 内 部 で 行わ れる 処理 を 記述 し た スク リプ ト が 必要 と な り ま 
す 。 関 数 の 定義 は 次 の よう に な り ま す 。 


4 


39qa1Aony 


39qanAow 較 


function 関数 名 ( 引数 リス ト ){ 
処理 : 


関数 の 名 前 付け の ルー ル は 、 変 数 の 名 前 の 付け 方 と 同じ も の で す (P.27 参 照 )。 
具体 的 に は 、 ア ルフ ァ ベ ッ ト 、 数 字 、 ア ンダ ー ス コア (_) を 使う こと が で き 、 大 
文字 と 小文字 を 区 別 し ま す 。 ま た 、 名 前 の 最初 の 文字 は アル ファ ベッ ト 、 ま た は 
アン ダー スコ ア か ら は じ め ま す 。 

関数 に 渡す 引数 は 、 関 数 名 の 後 の 括 弧 内 に 「,」( カ ンマ ) で 区 切っ て 並べ ます 。 
定義 され た 関数 が 実行 され る の は 、 関 数 が 呼び 出さ れ た と きのみ で す 。 


較 引 数 の 渡し 方 
引数 は 、 実 際 に は どの よう に し て 使う こと が で きる の で し ょ うか ? サン プル 
を 使っ て 解説 し まし ょ う 。 


上 記 の putDate 関 数 は 、date と いう 引数 を 渡し ます 。 定 義 さ れ た 引数 は その 
関数 内 で 自由 に 使う こと が で きま す 。 関数 内 で 引数 を 使う こと 、 そ の 中 に 入っ て い 
る 値 は 関数 に 渡し た も の が 参照 され る こと に な り ま す 。 

ここ で 注意 し な く て は な ら な いこ と は 、 あ る 関数 に 引き 渡し た 引数 に 関数 内 で 
変更 を 加え た と し て も 、 元 の 変数 の 値 は 変わ らち な いと いう こと で す 。 


関数 定義 部 
Funotion e (name ) { <ーーー① 関 数 の 読み 込み 
7 * 一 一 ーーーーー (4name が 変更 され て いる 


rite (name) : 







name= "Ohrj' 


document . 


name="M1ke": 2 変数 の 定義 
3 関数 の 実行 


PrintName (ni 
に "John" が 表示 され る 





5: 関 数 内 で は name 変 更 さ れ た が 
ここ で は "Mike" と 表示 され る 


前 ペー ジ の 図 で は 、printName 関 数 内 で 、 引 数 で 与え られ た name を 関数 内 
で 変更 し て いま す が 、 関 数 を 呼び 出し た 元 の 値 の 内 容 まで は 変更 され な いこ と に 
な り ま す 。 


田 値 を 返す 関数 

関数 は 処理 し た 結果 を 返す こと が で きま す 。 こ の と き 返 すこ と の で きる 値 は 1 
つ で す 。 返 され る 値 を 「 戻 り 値 ] と 呼び ます 。 値 を 返す に は return 文 を 使い ます 。 
形式 は 戻り 値 を return の 後ろ に 1 つ 書 きま す 。 


return 戻り 値 : 


これ を 実際 の 関数 内 で 使う と 、 以 下 の よ うな コー ド に な り ま す 。 





な お 、return を 記述 する と 、 関 数 の 処理 は そこ で 終了 し ます 。 


上 関数 を 実行 する 

関数 の 定義 は 行い まし た 。 で は 実際 に 実行 させ る に は どの よう に し た ら よ い の 
で し ょ うか ? 

関数 を 実行 させ る こと を 「 関 数 の 呼び 出し 」 と 呼び ます 。 関数 は 、 値 が 返っ て こ 
な い 場 合 は 、 関 数 名 と 引数 を 書く こと で 実行 され ます 。 書 式 と し て は 以下 の よう 
に な り ま す 。 

関数 名 ( 引数 ): 


た と えば 、 以 下 の よ うか な 関数 が 定義 され て いる と し ます 。 
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39qnony 


39qa1Aouy 識 





この よう に 定義 され た printName 関 数 を 実行 する 場合 に は 、 次 の よう に 記述 
し ます 。 


printName( name ): 


関数 の 呼び 出し で 注意 し な く て は な ら な い の は 、 関 数 を 実行 する 前 まで に 、 関 
数 の 定義 が 行わ れ て いな けれ ば な ら な いと いう こと で す 。 
関数 を 使っ た サン プル は 以下 の よう に な り ま す 。 


<htm1l> 

< 上 it1e>exeoute FunoCtion</ 上 1 モ 1e> 
<8Cript 1anguag@e= "avVa8Cript"> 
<! = こ 

Funotion printName (name) { 


document .wr1te(" 名 前 は ",name, "で す 。『") 


} 

//-ー> 

</ BCrip セ > 

<body bgoo1or="#EEF8do"> 

<h3 > 関数 の 実行 </h3> 

<hr /> 

<BCript 1anguade= "ava8Cr1ip 上 "> 

< く ! ニ = 
Yar name="Mike": // 変 数 の 定義 
printName (name) : / / 関 数 の 呼び 出し 

た 3 

< く / BCr1p キ > 

</body> 

</htm1> 


この スク リプ ト を 実行 させ る と 、 次 の よう な 結果 が 得 ら れ ま す 。 
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午 execute function 一 聞 icrosoft Internet Explorer 


: アイ ル ⑥ 編集 GE) 表示 お 気 に 和 DD ツー ル ① prm 


関数 の 実行 


名 前 は Mke で す 。 





また 、 値 が 返っ て くる 場合 は 、 そ れ を 代入 する た め の 変 数 を 用 意 し ます 。 し た 
が っ て 関数 呼び 出し の 書式 は 、 以 下 の よ うに な り ま す 。 


変数 = 関数 名 ( 引 数 ): 


た と えば 、 次 の よう に 定義 され た 関数 が ある と し ます 。 





この 場合 に は 、 関 数 の 呼び 出し は 次 の よう に な り ま す 。 





この 「answer」 は 、 返 っ て くる 値 を 受け 取る 変数 で す 。 実際 は 好き な 名 前 を 付 
け て か まい ませ ん 。 


画 変 数 の 範囲 

関数 の 引数 に つい て の 注意 は 、 変 数 が どの 範囲 で 使え る か と いう 問題 と 同じ も 
の で す 。 こ こ で 変数 は どの 範囲 内 で 使え る か に つい て 解説 し ます 。 こ れ を 、「 変 
数 の スコ ー プ 」 と 呼び ます 。 

変数 は 宣言 され た 場所 、 は じ め て 使わ れ た 場所 に よっ て 、 ど の 範囲 で 使え る か 
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39qa1AoNy 較 


が 決ま り ま す 。 変数 が 宣言 され た 場所 、 は じ め て 使わ れ た 場所 を 大 きく 分 ける と 
次 の 2 つ に な り ま す 。 


信 関 数 内 
@⑱ そ れ 以 外 


<8C エ ip 1anguad@e= "a マ a8C エ ipt"> 
で ニー 
Yar Today="2001/9/1": 一 ーーーーーーーーー 一 - 関数 外 で の 宣言 
funotion PrintBirthday ( ) { 
MC 導 いい 4 は 4 づい また 74 リ た 9 す 獣 < ーーー 関数 内 で の 宮 言 






に に いい つい まい ん (80 い c・V2 計 ) 


} 
0 ん 2 
</ 8C エ ip セキ > 


関数 の 内 部 で 宣言 され た 変数 は 、 そ の 関数 で し か 使う こと が で きま せん 。 その 
た め 、 外 部 か ら 関 数 内 部 で 宣言 され た 変数 を 呼び 出し て も 、 定 義 さ れ て いな い 
また は 予期 せ ぬ 値 を 参照 する こと に な り ま す 。 

それ 以外 の 場所 (<script> 一 </script> 内 ) で 宣言 され た 変数 は 、 ど こ か ら で 
も 参照 する こと が で きま す 。 


<8BCript 1anguade= "avVa8Cr1pt"> 
トー 

var Today="2001/9/1": 

funotion PrintBirthday ( ) { 





Yar myBirthday="1973/9/1"』 関数 外 で 定義 され た 


変数 は 参照 可能 






document .write (Today) 

} 

document .wriEe (myBirthday) : - 二 ーーーーーーーーー 一 - 関数 内 で 定義 され た 

2 変数 は 参照 で き な い 
っ 


</ BCr1p セ > 


この た め 、 さ ま ざ ま か 関数 内 で 共通 に 使い た い 変 数 (た と えば 日 付 な ど を 格納 
する も の ) は 関数 の 外 で 宣言 し こ て お きま し ょ う 。 ま た 逆 に 、 関 数 内 で し か 使わ な 
い 変 数 は 関数 の 中 で 宣言 し てこ おく の が よい で し ょ う 。 
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オプ ジェ クト モデ ル 





JavaScript の スク リプ ト プ ロ グラ ミン グ の 中 で 、 非 常に 重要 な 役割 を 果たす の 
が 「 オ ブ ジ ェクト 」 で す 。 い き な り オブ ジェ クト と いっ て し まう と 、 と て も 難し い 
も の の よう に 聞こ えま す が 、 一 度 理解 し て し まえ ば と て も 簡単 で す 。 ま た 、 こ の 
オブ ジェ クト の 定義 は 、 い わ ゆ る オブ ジェ クト 指向 言語 の 一 部 だ け 抜 き 出 し た よ 
うな も の な の で 、Java 言 語 を 代表 と する オブ ジェ クト 指向 言語 を 少し で も わか っ 
て いる と 容易 に 理解 で きま す 。 


較 オブ ジェ クト と は 


さて オブ ジェ クト と は 、 い っ た い ど の よう な も の な の で し ょ うか ? 日常 生活 
を し て いる と 、 い わ ゆ る 「 モ ノ 」 を よく 使い ます 。 た と えば テレ ビ 、 電 話 、 カ メラ 、 
炊飯 器 、 電 子 レ ンジ ……… 。 こ れ ら は どれ も 「 モ ノ 」 で す 。 こ れ ら の 「 モ ノ 」 の 仕組 
み は 複 雑 で す が 、 実際 に ユー ザー が 使う と き に は 簡単 に 使う こと が で きま す 。 そ 
れ は 、 使 う の に 必要 な 操作 が 限ら れ て いる か ら で す 。 

た と えば 、 炊 飯 器 を 考え た と き 、 お 米 を 炊く た め に 自分 で 温度 や 時 間 な ど を 設 
定 し 、 さ ら に は その 構造 や 電気 の 流れ 方 まで 指定 する 必要 は あり ませ ん (古い 炊 
飯 器 か ら 、 も し か し た ら 温 度 や 時 間 を 設定 し な いと いけ な い の か な ? ) 。 普 段 、 
そん な こと を 考え な く て も 炊飯 器 を 使え て いる の は 、 炊 飯 器 を 使う た め の 操作 が 
限ら れ て いる か ら で す 。「 炊 く 」、「 保 温 す る 」……… 、 と いっ た 操作 は 、 そ の 操作 
に 対応 する スイ ッ チ を 押す だ け で 、 ほ と ん ど 自 動 で 目的 の 動作 (お 米 を 炊く な ど ) 
を 得 ら れ ま す 。 こ の よう な 「 モ ノ 」 の 概念 を プロ グラ ミン グ の 世界 に 取り 入れ た の 
が オブ ジェ クト 指向 で す 。 

「 モ ノ 」 で は 、「 モ ノ 」 の 持っ て いる 各種 の 値 を 設定 し 、 操作 する こと が で きま す 。 
具体 的 に どの よう な 値 が 設定 で きる か を 挙げ て みる と 、 時 間 、 温 度 、 強 さ ……、 
と いっ た も の に な り ま す 。 ま た 、 そ れ ぞ れ の 値 を 設定 する に は スイ ッ チ が 必要 と 
な り ま す 。「 オ ブ ジ ェクト 」 を 、 こ の 「 モ ノ 」 と 対比 し て 考え る と 、 次 の よう な 対応 
関係 に な り ま す 。 


@「 オ ブ ジ ェクト 」 ・ 「 モ ノ 」 
@「 メ ソ ッ ド 」 : 「 ス イッ チ ]」 
@「 プ ロ パ ティ 」 「 設 定 値 ] 
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39qa1Aoy 較 





メソ ッ ド ] 


操作 





この よう に 考え る と 、 オ ブ ジ ェクト を 比較 的 簡単 に 理解 する こと が で きる で し 
よう 。 結局 の と ころ 、 プ ログ ラミ ング の 世界 で も オブ ジェ クト を 動作 させ る に は 
スイ ッ チ に 相当 する メソ ッ ド と いう も の を 使っ て 操作 する こと に な り ま す 。 

ここ で 、JavaScript で 扱う オブ ジェ クト の 例 と し て 、 わ か りや すい も の を 挙げ 
る と 、 次 の よう な も の が あり ます 。 


@navigator オ ブ ジ ェクト H Web ブ ラウ ザ の 本 体 
代 document オ ブ ジ ェクト  : Web ペ ー ジ が 表示 され る 部 分 


アル D 電 D O お WEAn AO へ 260 


トーーーーnavigator オ ブ ジ ェクト 








Windows 8 完全 読本 ーーーーーーー| 
「 Srrexsx ooxssosswse 
アラ ツェ 











た だ し 、JavaScript は 、Java 言 語 や C++ 言 語 な どの 純粋 な オブ ジェ クト 指向 
か ら 見 る と 、 継 承 に あたる 機能 が な いな ど 、 オ ブ ジ ェクト 指向 と は 言い 切れ な い 
部 分 が あり ます 。 


較 ビルト イン オ ブ ジ ェクト モデ ル 


オブ ジェ クト に は 、 最 初 か ら JavaScript に 組み 込ま れ て いる ビル トイ ン ( 組 み 
込み ) オ ブ ジ ェクト が あり ます 。 た と えば 、 先 ほど の navigator オ ブ ジ ェクト や 
document オ ブ ジ ェクト 、Form オ ブ ジ ェクト 、Date オ ブ ジ ェクト (日 付 オ ブ ジ 
ェクト )、Math オ ブ ジ ェクト (算術 オブ ジェ クト ) な ど が ビル トイ ン オ ブ ジ ェ ク 
ト で す 。 こ の うち navigator オ ブ ジ ェクト 、document オ ブ ジ ェクト 、Form 
オブ ジェ クト は 目 に 見 える オブ ジェ クト 、Date オ ブ ジ ェクト 、Math オ ブ ジ ェ 
クト は 目 に 見 えな い オ ブ ジ ェクト で す 。 

この よう な ビル トイ ン オ ブ ジ ェクト が ある の は 、Web ペ ー ジ 制作 者 が 基本 的 
な 部 分 の プロ グラ ム を 書か な く て も 、Web ペ ー ジ 上 で 高度 な 処理 が で きる よう 
に する た めで す 。 も し も 基本 的 な 部 分 が ビル トイ ン オ ブ ジ ェクト と し て 組み 込ま 
れ て いな いと 、Web ペ ー ジ 上 の マウ スカ ー ソ ル の X 座 標 と Y 座 標 を 調べ る プロ グ 
ラム や 、 ロ グ の 値 や 平方 根 の 値 な ど を 求め る た め の 計 算 用 プロ グラ ム ま で 作成 し 
な く て は な り ま せん 。 こ れ で は Web ペ ー ジ の 制作 は と て も 苦痛 な も の と な り ま 
す 。 こ うし た 問題 が 起こ と ら な いよ うに する た め に 、Web ブ ラウ ザ 上 で 使う も の を 
オブ ジェ クト と し て 実装 し 、 メ ソ ッ ド を 用 いて 利用 で きる よう に し て いる の で す 。 


@ ビ ルト イン オ ブ ジ ェクト 一 覧 


























Anchor anchors array Applet apPplets array 
Area arguments array Array Button 
Checkbox Data document elements array 
embeds array FileUpload Form forms array 
Frame frames array Function Hidden 
History history array Image images array 
Link links array location Math 
MimeType mimeTypes array navigator Number 
Option options array options array element 
Password Plugin plugins array Radio 
Reset Select String Submit 
Text Textarea window 
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田 オ ブ ジ ェクト の 配置 

JavaScript の 大 半 の ビル トイ ン オ ブ ジ ェクト は 、window オ ブ ジ ェクト を ト 
ッ プ に し た 階層 構造 に 組み 込ま れ て いま す 。 こ の 階層 を オブ ジェ クト 階層 と 呼び 
ます 。 ま た 、 こ の 階層 構造 目 体 を オブ ジェ クト モデ ル と 呼ぶ こと も あり ます 。 


マオ ブ ジ ェクト モデ ル 


windgw ) gavigator) 


Joo の 
ssNo/ 


この よう な 階層 構造 に まっ て いる の は 、 オ ブ ジ ェクト の アク セス を 容易 に する 
た めで す ( た だ 、NN と IE の オブ ジェ クト モデ ル は 若干 異な り ます )。 

た と えば 、 イ ンプ ッ ト フ ォ ー ム が 配置 され て いる よう な Web ペ ー ジ を 考え て 
み ま し ょ う 。 次 ペー ジ の 図 は 、 こ の と き の オ ブ ジ ェクト の 範囲 と 名 前 を 対応 させ 
た も の で す 。 
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強 Form Object - Microsoft Imternet Explorer 
: イル 編集 E) 表示 お 気 に 和 AO ッ - ル CD AM プ G 麻 


window 





document 


elements[O] 


elements[1] 


elements[2] 





forms[0] 


この よう に Web ブ ラウ ザ の それ ぞ れ の オブ ジェ クト に は 対応 する 名 前 が 付い 
て いま す 。 な お 、 同 じ 要 素 が 並ん だ 場合 は 配列 と し て 扱わ れ 、[ ] 内 の 数 字 で 区 別 
し ます 。[ ] 内 の 数 字 は 0 か ら は じ ま り ます 。 

な ぜ こ の よう な 構造 に な っ て いる か と いう と 、Web ペ ー ジ 内 が 構造 を 持た な 
いと する と 、 そ れ ぞ れ の フォ ー ム な どの オブ ジェ クト を 管理 する た め に 、 各 オブ 
ジェ クト に 識別 で きる た め の 名 前 を 付け る 必要 が あり ます 。 こ れ は 一 見 簡単 に 見 
えま す が 、 プ ログ ラム で コン トロール し た い 場 合 に は 面倒 に な り ま す 。 その た め 、 
Web ブ ラウ ザ は Web ペ ー ジ を 階層 構造 に より 管理 し て いま す 。 な お 、 そ れ ぞ れ 
の オブ ジェ クト に 名 前 を 付け る こと も で きま す 。 

オブ ジェ クト の 階層 構造 に し た が っ て 、 そ れ ぞ れ の オブ ジェ クト ヘア クセ ス す 
る 名 前 を 考え て みる と 、 次 の 図 の よう に な り ま す 。 


講 Form Object - Microsoft Internet 


indow.document.forms[0].elements[O] 
indow.document.forms[0].elements[1] 


indow.document.forms[O].elements[2] 





それ で は 、 主 要 な オブ ジェ クト を 取り 上 げ て 、 解 説 し て いき まし ょ う 。 
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圏 window オ ブ ジ ェクト 

window オ ブ ジ ェクト は 、 す べ て の オブ ジェ クト の 基 と な る も の で す 。 この 
オブ ジェ クト が 扱う も の は 、 ウ ィ ン ド ウ の 操作 や 、 メ ニュ ー バ ー、 ツ ー ル バー、 
アラ ー ト と いっ た Web ブ ラウ ザ 全 体 の 動作 で す 。 

window オ ブ ジ ェクト は すべ て の オブ ジェ クト の 親 な の で 、 参 照 する と き に 
記述 を 省略 し て も か まい ませ ん 。 た と えば 、 ア ラー ト (警告 の ダイ アロ グ ボ ッ ク 
ス ) を 呼び 出す 場合 、 本 来 な ら 、 次 の よう に 記述 し な く て は な り ま せん 。 


し か し 、wWindow オ ブ ジ ェクト は 、 必 ず 存 在 す る も の な の で 、 オ ブ ジ ェクト 
を 指定 する の に 、window オ ブ ジ ェクト を 人 省略 し て 記述 する こと が で きま す 。 
その た め 、 ア ラー ト を 呼び 出す の に は 次 の よう に 記述 する こと も で きま す 。 


し AUO ク た 44 












nane 
window 





_ opener 


0DNSWR づ JE ト の 主 な メソ ッ ド 














blur clearTimeout close confirm_ focus 
_ prompt scroll _setTimeout 
圏 navigator オ ブ ジ ェクト 


navigator オ ブ ジ ェクト は 、Web ブ ラウ ザ に つい て の 情報 を 持っ て いる オブ 
ジェ クト で す 。 こ の オブ ジェ クト を 使う こと に より ユー ザー が 使っ て いる Web 
ブラ ウザ や OS な どの 環境 に つい て 調べ る こと が で きま す 。 


@navigator オ ブ ジェ ク 324PAEa1 
N appVersion 





mimeTypes 






plugins 


@navigator オ ブ ジ ェクト の 主 な メソ ッ ド 
javaEnabled 
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田 document オ ブ ジ ェクト 

document オ ブ ジ ェクト は 、「Web ペ ー ジ を 表示 する 部 分 ] を 表す オブ ジェ ク 
ト で す 。document オ ブ ジ ェクト に は 、 ア ンカ ー、 フ ォ ー ム 、 リ ンク 、 タ イト 
ル 、 カ ラー、 場 所 な ど 、 ペ ー ジ の 要素 に 関す る さま ざま な 情報 が 含ま れ て お り 、 
多く の 要素 オブ ジェ クト を 操作 する メソ ッ ド や プロ パテ ィ を 提供 し て いま す 。 実 
質 的 に は document オ ブ ジ ェクト は <body> 一 </body> で 囲ま れる 部 分 に 対応 
する 、 と 考え る こと が で きま す 。 

この 範囲 を 操作 する 場合 は 、 ほ と ん ど document オ ブ ジ ェクト 以下 の メソ ッ 
ド や プロ パテ ィ 、 オ ブ ジ ェクト を 扱え ば よい こと に な り ま す 。 


@document オ ブ ジ ェクト の 主 な プロ パテ ィ 





@document オ ブ ジ ェクト の 主 な メソ ッ ド 


document オ ブ ジ ェクト は 、form オ ブ ジ ェクト や link オ ブ ジ ェクト な ど を 子 
と し て 持っ て いま す 。 


還 |ocation オ ブ ジ ェクト 

location オ ブ ジ ェクト は 、window オ ブ ジ ェクト の 下 に 配置 され て いる オブ 
ジェ クト で す 。 こ の オブ ジェ クト は 、 場 所 (URL) に 関し て の 処理 を 行う と き に 使 
いま す 。URL を 変更 し た り 、 現 在 表示 され て いる ペー ジ の アド レス に つい て の 情 
報 を 取り 出し た りす る こと が で きま す 。 


@|ocation オ ブ ジ ェクト の 主 な プロ バ パティ 


全 |ocation オ ブ ジ ェクト の 主 な メソ ッ ド 
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回 history オ ブ ジ ェクト 

history オ ブ ジ ェクト は 、Web ブ ラウ ザ の 持っ て いる 履歴 に 関し て の 処理 を 行 
うと き に 使い ます 。 こ の オブ ジェ クト を 用 いる こと に より 、1 つ 前 の ペー ジ へ 戻 
る と いっ た 動作 を させ る こと が で きま す 。 





人 @history オ ブ ジ ェクト の 主 な プロ パテ ィ 
_current 。 length next previous 








田 オ ブ ジ ェクト の 生成 

オブ ジェ クト を 使う に は 、 オ ブ ジ ェクト を 生成 する 必要 が あり ます 。 オ ブ ジ ェ 
クト に よっ て は 1 つの Web ペ ー ジ 内 で 複数 使わ れる 可能 性 が あり ます 。 その た め 、 
事前 に オブ ジェ クト を 用 意 し て お く と する と 、Web ブ ラウ ザ は いく つの オブ ジ 
ェクト を 生成 し て お く 必 要 が ある か わか り ま せん 。 そ の た め 、 オ ブ ジ ェクト を 使 
うた め に は 、 明 示 的 に オブ ジェ クト を 生成 する 必要 が あり ます 。 こ の と き 生 成 さ 
れ た オブ ジェ クト を 「 オ ブ ジ ェクト の 実体 ] と 呼ぶ こと も あり ます 。 

オブ ジェ クト は 生成 する と き に は 名 前 が 必要 で す 。 こ の 名 前 は Web ペ ー ジ 内 
で オブ ジェ クト を 一 意 に 区 別 す る た め に 用 いら れる の で 、1 つ の Web ペ ー ジ 内 で 
同じ 名 前 を 使う こと は で きま せん 。 

オブ ジェ クト の 生成 に は 「new」 を 使い ます 。 書 式 は 以下 の ひよ うに な り ま す 。 


ペー ジ 内 で 認識 する オブ ジェ クト 名 = new オブ ジェ クト 名 ( ) 


上 記 の よう に 記述 する と 「 オ ブ ジ ェクト 名 」 と 同じ 機能 を 持っ た オブ ジェ クト が 
生成 され ます 。 
た と えば 、 次 の よう な 記述 が ある と し ます 。 


これ だ と 、Date オ ブ ジ ェクト を 基 に し た 「myDate」 オ ブ ジ ェクト が 生成 され 
ます 。 て この 生成 は Web ペ ー ジ 内 で 複数 使用 され る 可能 性 の ある オブ ジェ クト に 
だ け 行 わな けれ ば な り ま せん 。 逆 に Web ペ ー ジ 内 に 1 つ し か な いよ うな 
navigator、history な ど は 、 オ ブ ジ ェクト の 生成 を 行わ な く て も 使用 する こと 
が で きま す 。 
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画 with 文 

JavaScript で は スク リプ ト の 中 で オブ ジェ クト の 階層 を 記述 し ます 。 こ れ は ペ 
ー ジ 内 で 論理 的 に オブ ジェ クト を 扱う た め に 便利 な の で す が 、 入 力 は 面倒 な も の 
で す 。 同じ よう な 階層 構造 を 記述 する 場合 に は 、 そ の 都度 記述 し な く て は な り ま 
せん 。 そ うい っ た 場合 に は 、with 文 を 使う こと で 共通 する オブ ジェ クト の 記述 
を 省略 で きま す 。 書式 は 以下 の ひよ うに な り ま す 。 


with( オ ブ ジ ェクト 名 ){ 
処理 


た と えば 、 文 字 列 を 画面 に 表示 する よう な 場合 、 次 の よう に 記述 し ます 。 





この 記述 は 、document オ ブ ジ ェクト を 繰り 返し て 記述 し て いま す 。 こ の 部 
分 を with 文 を 用 いて 以下 の よう に 書き 換え る こと が で きま す 。 





with 文 は 、 入 れ 子 に 指定 (with 文 の 中 で with 文 を 指定 ) す る こと も 可能 で す 。 


略 メソ ッ ド 


メソ ッ ド と は 、 オ ブ ジ ェクト を 操作 する た め の ス イッ チ で す 。 オブ ジェ クト は 、 
基本 的 に メソ ッ ド に より 操作 され ます 。 オ ブ ジ ェクト に は 、 そ れ ぞ れ を 操作 する 
た め の メ ソ ッ ド が 用 意 さ れ て いま す 。 JavaScript で は 、 こ の メソ ッ ド を 使い オブ 
ジェ クト を 操作 する こと で プロ グラ ミン グ を 行い ます 。 

JavaScript で の メソ ッ ド の 記述 は 、 ち ょ うど 関数 の 呼び 出し と 同じ よう な 形 を 


/1 





39qanAoNy 較 


39qanAoNy 較 


し て いま す 。 あ る オブ ジェ クト の メソ ッ ド を 操作 する に は 、「 ど の オブ ジェ クト 」 
に 対し て 「 ど の よう な 操作 ] を する か を 指定 し ます 。 こ の 関係 を 記述 する の に 
JavaScript で は 「.」 (ピリ オド ) を 用 いま す 。 

メソ ッ ド の 記述 の 書式 は 以下 の ひよ うに な り ま す 。 


オブ ジェ クト 名 . メ ソ ッ ド 名 ( ) : 


次 の 利用 方 法 の 例 は 、Web ペ ー ジ が 表示 され る 部 分 に 該当 する document オ 
ブ ジ ェクト に 対し て 、write メ ソ ッ ド を 使う こと で 、Web ペ ー ジ に 文字 列 を 表示 
する こと が で きま す 。 


較 プロ バテ ィ 


プロ パテ ィ と は 、 オ ブ ジ ェクト 内 で あら か じ め さ ま ざ ま な 値 を 保持 し て いる も 
の で す 。 オ ブ ジ ェクト 内 の 固有 の 変数 と いう こと も で きま す 。 

JavaScript で は 、 プ ロバ ティ は ビル トイ ン オ ブ ジ ェクト が も と も と 持つ も の と 
し て 実装 され て いま す 。 プ ロバ ティ に 値 を 設定 する こと に より 、 オ ブ ジ ェクト の 
設定 値 を 変更 する こと が で きま す 。 プ ロ パ ティ の 値 と し て 設定 され て いる の は 、 
背景 色 、 テ キス ト の 色 、Web ブ ラウ ザ の 各種 情報 (ブラ ウザ 名 、 バ ー ジ ョ ン 情 報 
な ど ) な ど で す 。 

プロ パテ ィ の 使い 方 は 、 メ ソ ッ ド と 同様 に オブ ジェ クト を 指定 し て プロ パテ ィ 
を 指定 し 、「 ど の オブ ジェ クト 」 の 「 ど の 値 」 と 指定 し ます 。 メソッド と 異な る の は 、 
単なる 値 な の で プロ パテ ィ 名 の 後ろ に 「( )]」 を 付け な いこ と で す 。 

プロ パテ ィ の 書式 は 以下 の よう に な り ま す 。 


オブ ジェ クト 名 . プロ パテ ィ 名 


実際 に 、 プ ロバ パテ ィ へ の アク セス を 行う 記述 を 行う と 、 次 の よう に な り ま す 。 


Es 


プロ パテ ィ は 、 値 を 設定 し た り 参 照 し た りす る こと が で きま す ( た だ し 、 プ ロ 
パテ ィ に よっ て は 値 が 設定 で き な い も の も あり ます )。 ブ プロ パテ ィ に 値 を 設定 す 
る に は 、 プ ロバ ティ に 値 を 代入 する こと に より 行い ます 。 書 式 は 以下 の よう に な 
り ま す 。 


オブ ジェ クト 名 . プ ロ パ ティ 名 = 値 : 


この 記述 か ら わ か る よう に 、 代 入 演算 子 を 用 いて 、 プ ロ パ ティ に 値 を セッ ト し 
ます 。 記述 例 は 、 次 の よう に な り ま す 。 


また プロ パテ ィ を 参照 する に は 、 プ ロ パ ティ を 指定 する こと で 行い ます 。 プ ロ 
パテ ィ の 値 の 参照 は 、 代 入 演算 子 で 読み 出す こと も で きま すし 、 メ ソ ッ ド の 引数 
の 部 分 で も 行う こと が で きま す 。 


変数 = オブ ジェ クト 名 . プ ロ パ ティ 名 : 
メソ ッ ド ( オブ ジェ クト 名 . プ ロ パ ティ 名 ) 


記述 例 と し て は 、 次 の よう な も の に な り ま す 。 


人 
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フォ ー ム 、 フ レー ム を 扱う 





較 フォ ー ム と は 


フォ ー ム は WWW に 対し て 非常 に 多く の 影響 を 与え て きま し た 。 特 に CGI と 連 
携 す る こと に より 、 さ ま ざ ま な Web ア プリ ケー ショ ン を 実現 する た め の 部 品 と 
し て 使わ れ て いま す 。 フォ ー ム の サン ブル を 挙げ る と 、 次 の よう な 記述 と 表示 に な 
り ま す 。 


<fForm method="pogt" 


団 action="http: //www. ポ ホネ Jp/cgi-bin/check"> 

入力 1 : <input type="text" name="1nput1" gize="10"/> 
回 <Dbr /> 

入力 2 : <input type="text" name="input2" gize="10"/> 
に | <br /> 

パス ワー ド : <input type="pa88word" name="pa88word1" 
回 gze="10" /> 

<hr /> 

<1nput type="8ubmit" va1ue=" ク エリ 送信 " /> 

<1nput type= "regset" value=" リ セッ ト " /> 
</form> 


午 Form1 - Microsoft Internet Explorer 


: フイ ル (E) 編集 (EC) 表示) お 気に入り @ 








この サン プル コー ド で は 、 上 の 図 の よう に 入力 フォ ー ム が 3 つ 表 示さ れ ま す 。 
これ に 値 を 入力 し 、 を クリ ッ ク す る と 「http://WwW.* **.jD/cgi- 
bin/check」 で 指定 し た Web サ ー バ ー 上 の CGI プロ グラ ム を 実行 し ます 。 
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し か し 、「 入 力 さ れ た 値 が 正しい 形式 か どう か チェ ッ ク し た い 」 な ど と いっ た 場 
合 に は どう し た ら よ い の で し ょ うか ? 入力 され た 値 を Web サ ー バ ー へ 送り 、 
そこ で 値 を 検証 し て 結果 を 返す と いう こと も で きま す が 、 レ スポ ンス は か な り 遅 
いも の に な る で し ょ う 。 こ の よう な 状況 で 威力 を 発揮 する の が JavaScript で す 。 
JavaScript で は 、 ク ライ アン ト サ イ ド で 入力 され た 値 を チェ ッ ク し た り 、 入 力 さ 
れ た 値 に 応じ た 反応 を 返し た り と いっ た こと を 簡単 に 行え ます 。 

ここ で は 、 JavaScript を 使っ て イン タラ クティ ブ な 反応 が で きる 、 フ ォ ー ム 制 
作 の た め の 基 礎 知識 を 解説 し ます 。 





較 フォ ー ム を 作る 


最初 に 、 簡 単に HTML の フォ ー ム を 思い 出し て み ま し ょ う 。 フ ォ ー ム で 必要 と 
な る 要素 は <form> タ グ で す 。 書式 は 以下 の よう に な り ま す 。 


<form method="post | get" action=" プ ログ ラム へ の パス "> 
フォ ー ム 要素 の オブ ジェ クト 
</ form> 


method 属 性 は 、 フ ォ ー ム 要素 の オブ ジェ クト に 入力 され た 値 を どの よう な 方 
法 で 渡す か と いう も の で す 。 ま た action 属 性 に は 、submit (提出 ) さ れ た と き に 
どの プロ グラ ム に 処理 を 引き 渡す か と いう こと を 指定 し て お きま す 。 
主 な フォ ー ム 要素 の オブ ジェ クト に は 、 以 下 の 表 の も の が あり ます 。 三 


@ 主 な フォ ー ム 要素 の オブ ジェ クト 
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較 フォ ー ム を 扱う 


フォ ー ム を JavaScript で 扱う に は どう し た ら よ い の で し ょ うか ? ここ で 重要 
と な る の が オブ ジェ クト 階層 で す 。 フ ォ ー ム の 階層 構造 は window オ ブ ジ ェ ク 
ト か ら 見 て くる と 次 の よう に な り ま す 。 


マフ ォ ー ム オブ ジェ クト 階層 


window elements リ 
Jukan リ 
BSSword) 


elements は フォ ー ム 要素 の オブ ジェ クト を 表し て いま す 。 forms オ ブ ジ ェ ク 
ト と elements オ ブ ジ ェクト は 、Web ペ ー ジ 内 に 複数 ある 可能 性 が あり ます 。 
上 図 の よう に フォ ー ム は さま ざま な オブ ジェ クト の 子 で す 。 JavaScript で この フ 
ォ ー ム を 参照 する に は 、 階 層 構 造 を 意識 し て 指定 し ます 。 

JavaScript で は フォ ー ム 全体 、 フ ォ ー ム の 各 要 素 を 示す キー ワー ド は 以下 の よ 
うに な り ま す 。 


@ フ ォ ー ム 全体 ー forms 
@ フ ォ ー ム の 各 要 素 一 elements 


また 、 フ ォ ー ム と フォ ー ム の 要素 は 1 つの Web ペ ー ジ 内 で 複数 存在 する 可能 性 
が あり ます 。 そ の た め 、forms、elements を 参照 する と き に は 何ら か の 形 で 区 
別 を し な く て は な り ま せん 。 JavaScript に は 、 そ の 区 別に 「 添 え 字 」 と 「 名 前 」 を 
使っ た 2 種類 の 方 法 が あり ます 。 


一 添 え 字 に よる アク セス 

1 つ 目 は 添え 字 を 使っ た 方 法 で す 。 フ ォ ー ム は Web ペ ー ジ 内 で 定義 され た 順に 
番号 が 振ら れ て いき ます 。 ま た フォ ー ム の 各 要 素 は フォ ー ム 内 で 定義 され た 順に 
番号 が 振ら れ ま す 。 こ の 番号 を 使っ て 区 別 す る の が 添え 字 に よる 方 法 で す 。 

フォ ー ム へ の アク セス は 次 の よう に な り ま す 。 
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eulmgii 
<htm1> 
<tit1e>Form 添 え 字 </t1t1e> 
<body> 


<form action 


document.forms[0] 


document.forms[1] 


document.forms[2] 


</body> 
</htm1> 





この よう に Web ペ ー ジ 内 で <form> タ グ が 出 て きた 順に 0 か ら 番 号 が 振ら れ て 
いき ます 。 こ れ ら の フォ ー ム の 参照 は 、 以 下 の よ うな 記述 に な り ま す 。 


Meb ペ ー ジ の 中 の (document) の 1 番目 の フォ ー ム (forms[0] ) 
も し も フォ ー ム の 配置 され て いる 場所 が フレ ー ム 内 な どの 場合 は 、forms[n] 


の 前 の 部 分 に frames[n] が 入り ます 。 
フォ ー ム の 要素 (element) へ の アク セス は 次 の よう に な り ま す 。 












HOEUIIIETO 
<htm1 > 
<tit1e>e1ement 添 え 字 </tit1e> 
<body> 
<form action* "に つ 


<1nput ype="DutEon リ > 
<1nput type="Dutton リ > 


document.forms[O].elements[O] 
document.forms[0].elements[1] 


<textarea、""・*・・ > document.forms[O].elements[21 
</form> 
<Eorm action・・*・・ > 


<1nput type="DutEon"> 
<1nput type= リ "Dutton リ "> 


<textar エ ea > 


document.forms[1].elements[O] 
document.forms[1].elements[1] 
document.forms[1].elements[2] 


</body> 
</htm1> 





が 
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39qanAouy 較 


フォ ー ム の 各 要 素 へ の アク セス も 、 フ ォ ー ム の と き と 同 様 に フォ ー ム 内 で 記述 
され た 順に 0 か ら 番 号 が 振ら れ ま す 。 参 照 は 以下 の ひよ うに な り ま す 。 


Meb ペ ー ジ の 中 の (document) の 1 番目 の フォ ー ム (forms [0]) の 1 番目 の 
要素 (e1ements[0] ) 


実際 の 記述 で は 、 次 の よう に な り ま す 。 


一 名前 に よる 参照 

フォ ー ム 、 フ ォ ー ム の 要素 の 参照 に は 、 添 え 字 だ け で な く 名 前 に よる 参照 も サ 
ポー ト さ れ て いま す 。 名 前 に よる 参照 の 場合 に は 、 そ れ ぞ れ の 要素 の name 属 性 
に よっ て 付け られ た 名 前 を 参照 し ます 。 そ の た め 、 同 じ Web ペ ー ジ 内 の フォ ー 
ム に 同じ 名 前 を 使っ て は いけ ませ ん 。 ま た 同様 に 、 あ る フォ ー ム 内 で フォ ー ム の 
要素 に 同じ 名 前 を 使っ て は いけ ませ ん 。 

名 前 に よる 参照 は 次 の よう に な り ま す 。 


、 <htm1> 
<tit1e>fForm 名 前 </t1t1e> 
<body> 


<form name="E1 リ > 


document.f1 


document.f2 


document.f3 


</body> 
</htm1> 





この よう に 、 添 え 字 に よる アク セス より も 、 名 前 に よる 参照 の ほう が 理解 し や 
すい と 思い ます 。 少 な く と も この フォ ー ム の 要素 が 、Web ペ ー ジ 内 の 何 番目 な 
の か と いっ た こと は 数 えな く て も よい か ら で す 。 
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また 、 ス クリ プ ト を 書い た 後 か ら フ ォ ー ム や フォ ー ム の 要素 を 追加 し て も 、 番 
号 で な けれ ば 参照 の た め の 部 分 は 変更 し な く て も 問題 は あり ませ ん 。 制作 途中 に 
name 属 性 に よっ て 名 前 を 付け る と いう 作業 が 必要 と な り ま す が 、 フ ォ ー ム の 数 
が 増え れ ば 増え る ほど 、 こ の 作業 に よる メリ ッ ト が 大 きく な る こと で し ょ う 。 個 
人 的 に は 名 前 に よる 参照 を お 勧め し ます 。 

な お 、 添 え 字 に よる 参照 と 名 前 に よる 参照 は 並存 で を ます の で 、 名 前 を 付け て 
お いて も 番号 で 参照 する こと が で きま す 。 


略 フレ ー ム 


NN2 の 登場 以降 急速 に 広まり 、Web ペ ー ジ の 作成 に 大 き な 影 響 を 与え た の が 
フレ ー ム で す 。 た だ 、 最 近 で は サー バー サイ ド で ダイ ナミ ッ ク に Web ペ ー ジ を 
生成 する サイ ト も 多い た め 、 以 前 に 比べ る と フレ ー ム の 使用 は 減っ て いる よう で 
す 。 

使い 方 と し て は 、Web ペ ー ジ を 左右 に 2 分 割 し て 左側 に メニ ュー、 右 側 に 情報 
を 表示 し た り 、 一 番 下 に 広告 バナ ー 用 の フレ ー ム を 作っ た り と 、 さ ま ざ ま な バリ 
エー ショ ン が 試さ れ て いま す 。 


マフ レー ム を 使っ た Web ペ ー ジ の 例 


MSDN Home > MSDNUubrarw 


を 上 | windows Script 


Windows Script is a 
曰 Web Development comprehensive scripting 
国 eheviors infrastructure for the Microsoft 
Windows plaform. Windows 
Cascadi le Sheets 
2 ンー eK Script provides script engines。 
国 pats Binding Visual Basic Scriptng EdiGion 
国 Content and Component De and Microsoft JScript, which can embedded into Windows 
国 HTML and Dynamic HTML Applications and an extensive array of supporting 
田 HTML Applications (HTA) technologies that make it easier for script Users to script 
6 Windows applications。 
国 Networking We recently moved much of the Scripting documentation。 
国 Pivacy but you can find it all herei 
国 Programming and Reusingt ni ー 
Scnipt p e p 
胃 Scrptng に mote Scrptnq Documentatbon 
Documentation 





as Srnnt harumentafinn 


> 





と 
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JavaScript で は 、 フ レー ム も イン タラ クティ ブ に 制御 する こと が で きま す 。 た 
だ し フォ ー ム を 制御 する の と 同様 に 、 事 前 知識 は 必要 と な り ま す 。 し か し 、 フ ォ 
ー ム を し っ か り と 理解 で き て いる な ら ば 、 ほ と ん ど 同 様 に 扱う こと が で きま す 。 

フレ ー ム を 作る に は 、 必 ず フ レー ム の 構造 を 定義 むせ る ファ イル が 必要 と な り ま 
す 。 た と えば 次 の よう に な り ま す 。 
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| <htm1> 
<tit1e> フ レー ム 定 義 </tit1e> 
<framese 上 Co1s="150,* リ > 
<fFrame 5ro="Erame1 .htm1"> 
<frameset rows="150,* リ > 
<Frame Sro="Frame2 .htm1 リ > 
<frame Brc="Frame3 .htm1!> 
</framege ヒ > 
</frameget> 
</htm1 > 


フレ ー ム の 指定 に つい て の 詳し い 解 説 は 、 HTML の 解説 書 を 参照 し こく だ さい 。 
実際 に フレ ー ム を 使っ て 表示 させ て みる と 、 次 の よう に な り ま す 。 


強 フレ ー ム 定義 - Microsoft Internet Explorer 
| アル GD 寺 MO 表 た 上 8%CAOQ ツ -AO MI2 矯 


frame1.html frame2.html 


framed.html 
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ここ で フレ ー ム を どの よう に 参照 する か と いう と 、 フ ォ ー ム の と き と 同 じ よ う 
に HTML 文 で 、<frame> タ グ が 定義 され た 順に 0 か ら 番 号 が 振ら れ ま す 。 こ の 
番号 を 使っ て 、 次 の よう に 参照 し ます 。 










<htm1> 
<tit1e> フ レー ム 添 字 </tit1e> 
<Frameset co1g="150,* リ > 
<frame Sro="Frame1 .htm1"> 
<fFrameSet rows="150,* リ > 
<frame BrC="Frame2 .htm1"> 
<Erame Src="Frame3 .htm1"> 
</Frameset> 
」 </framese キ > 
</htm1> 


window.frames[O] 


window.frames[1] 
window.frames[2] 











また 、 フ レー ム も フォ ー ム と 同様 に 名 前 に よっ て 参照 する こと が で きま す 。 フ 
レー ム の 場合 は <frame> タ グ の name 属 性 を 使っ て 名 前 を 付け ます 。 た だ し 、 
それ ぞ れ の フレ ー ム に は 必ず 異な っ た 名 前 を 付け て くだ さい 。 同 じ 名 前 に する と 
Web ペ ー ジ 中 で フレ ー ム を 一 意 に 特定 する こと が で き な く な っ て し まい ます 。 

参照 する た め の 書 式 は 以下 ひよ うに な り ま す 。 


window. フ レー ム 名 
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ズ 
8 
ミ 
中 
@ 
叫 


最近 で は 、 フ ォ ー ム や フレ ー ム を 使う だ け で な く 、Web ペ ー ジ を ダイ ナミ ッ 
ク に 動か し た り 、 特 殊 効 果 を 付け た りす る た め に 、 さ ま ざ ま な 要素 を 操作 する 必 
要 が あり ます 。 こ の よう な と き に 必要 と な る の が 、DOM (Document Object 
Model) と いう 考え 方 で す 。 

DOM は 、Web ペ ー ジ 内 の 要素 を 階層 構造 で 管理 し よう と 考案 され た も の で す 。 
この 規格 自体 は W3C で 制定 され て いま す 。 現 在 、DOM Level1 と DOM 
Level2 が 勧告 案 に な つて いま す 。 な お 、DOM Level2 は 5 つの 仕様 か ら 構成 さ 
れ ま す が 、 す べ て は 紹介 し きれ ませ ん の で 、 こ こ で は 1 つ だ け 紹 介し ます 。 


@Document Object Model (DOM) Level 1 Specification 
URLm http://www.w3.org/TR/REC-DOM-Leve1-1/ 





人 @Document Object Model (DOM) Level 2 Core Specification 
URL 陸 http://www.w3.org/TR/DOM-Leve1-2-Core/ 





上 記 の 勧告 を 見 る と 、 か な り ボ リュ ー ム が あり 、 非常 に 面倒 に 思う は ず で す 。 
し か し 、 JavaScript と HTML を 使っ て Web ペ ー ジ を 作る と いう 観点 か ら す る と 、 
使う 部 分 は 少な く 、 実 は さほど 難し いも の で は あり ませ ん 。 実際 に 一 部 な ら 
JavaScript の コー ド で は よく 使っ て いま す 。 し か し 、 盲 目的 に DOM を 使う より 
も 、 若 干 内 容 に つい て も 知っ て お いた ほう が スク リプ ト を 理解 する の が 容易 に な 
る の で 、 簡 単に 解説 し て お きま す 。 


較 DOM の 構造 


DOM の 構造 は 、 実は 非常 に 簡単 で 、 window を トッ プ に し た 階層 構造 の 下 に 、 
Web ペ ー ジ で 使う オブ ジェ クト が 配置 され て いる と いう も の で す 。 
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window exturea ) 
aa 
Jauglesd り 
fame_) pessword ) 
hd 
ーーーー 、| 電 滞 則 映 計 記 
kB 
pcsten ) ー'sd9_) 
heckbax) 
on 
Sect gpton 
navigator 
ーーgugin リ 
mimeType) 


この よう に 階層 構造 に な っ て いる の は 、Web ペ ー ジ 内 に 散在 し て いる 各種 オ 
ブ ジ ェクト に 容易 に アク セス で きる よう に する た めで す 。 こ の 構造 が わか ら な い 
と 、JavaScript か ら も オブ ジェ クト を 指定 する こと が で き な く な る た め 、 操 作 が 
で き な い こと に な り ま す 。 

た と えば 、 次 の よう な HTML が あっ た と し ます 。 





39qa1woNy 








この と き の DOM 構 造 は 、 次 の よう に な っ て いま す 。 


window 


この よう に 、HTML は 必ず DOM に より 表現 で きま す 。 そ の た め 、JavaScript 
な どの スク リプ ト 言 語 で HTML 内 の オブ ジェ クト を 操作 し よう と し た と き に は 、 
必ず 意識 し な く て は な ら な いこ と に な り ま す 。 


庫 オブ ジェ クト の 特定 


DOM を 使っ て 各種 オブ ジェ クト を 特定 する に は 、 ど の よう に し た ら よ い の で 
し ょ うか ? これ も 、 実 は さほど 面倒 な も の で は あり ませ ん 。 

た と えば 、 次 の よう な DOM 構 造 を 持っ た HTML 文 書 が あり 、checkbox フ ォ 
ー ム の チェ ッ ク の 状態 を コン トロ ー ル し た いと し ます 。 
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window ) 
プー 
ンジ / Bon 


この 場合 、 ス クリ プ ト 中 で の checkbox フ ォ ー ム の 表し 方 は 、 以 下 の よ うに な 
り ま す 。 


window オ ブ ジ ェクト は 省略 し て も よい の で 、 次 の よう に 記述 する こと も で 


で 


1 
誕 


こう いっ た 表現 な ら 、JavaScript を ちょ っ と 使っ て いる 人 な ら ば 理解 が し や す 
い の で は な いで し ょ うか ? 

階層 構造 の トッ プ か ら 書 き 連 ね て いけ ば 、DOM を 表現 で きた こと に な り ま す 。 
forms と elements の 添え 字 は 、Web ペ ー ジ 内 で 何 回 目 に 出 て くる フォ ー ム 、 
また は フォ ー ム 要素 な の か と いう こと を 表し て いま す 。 

また 、DOM を 操作 する と き に window か ら は じ め ず に 、 特 定 の 場所 か ら 相対 
的 に 記述 する こと も で きま す 。 た と えば 、 次 ペー ジ の よう な DOM を 持つ HTML 
が あり 、DOM ツ リー の 左側 に ある ドキ ュ メ ント 内 に 記述 され て いる スク リプ ト 
か ら 、 右 側 に ある フォ ー ム 内 の Checkbox フ ォ ー ム を 特定 し た いと し ます 。 
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こ window リ 


P2 ーー 


button ) checkboxX ) 


この と き は まず 、 以 下 の よ うな 記述 が 考え られ ます 。 


これ は 先 に 説明 し た 、 ト ッ プ の window オ ブ ジ ェクト か ら 階 層 構 造 を 下っ て 
きた も の で す 。 こ こ で 、 こ れ を 相対 的 に 表現 する と 以下 の よう な 記述 も 可能 と な 
り ま す 。 





parent と は 、 自 分 より 1 階層 上 の オブ ジェ クト を 表し て いま す 。 
それ で は 、 こ こま で の 解説 を ふま えて 、 実 際 の スク リブ プ ト の 例 を 挙げ て お き し 
よう 。 


dom.html 
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SECTION 2-10 金 DOM 


<Erame BrC=" エ igqht .htm1" /> 


</Framege> 
</htm1> 
left.html 
<htm1 > 
< 上 it 上 1e>dom 1eF</ 上 1 上 16> 
<8C エ ip 1anguad@e= "る で a8Cr1pt"> 
トマ に と 
Funoction chechAtRight ( ) { 
parent . Eames [1] .document .Eorms [0] . 
回 e1ementg[0] .checjkked = 'rue': 
} 
ルル ニコ ニッ 
< く / BC エ rip セキ > 
<body bgco1or=" 失 dd"> 
<form> 
<1npu 上 ype="button" value="oheok" 
回 onc1iok="ohechAtRight()" /> 
</ Eorm> 
</body> 
</htm1 > 
right.html 
<htm1 > 


< 上 it1e>dom 1gh ヒ </ 上 it1e> 
<body bgco1or="#C0c0qd"> 
<Eorm> 
<input type="oheockbox" /> チ ェ ッ クボ ックス 
</EForm> 
</body> 
</htm1> 
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この 例 の スク リプ ト を 実行 する と 、 次 の よう に な り ま す 。 


当 dom005 - Microsoft Internet Explorer 豆 | 


お 気に入り @ ツウ - ル O AM2⑪ 条 





強 dom005 - Microsoft Internet Explorer 


: ファ イル (FE) 編集 E) 表示 お気 に 和 D⑯ ウー ル ①D へ ヘルプ 





Web ブ ラウ ザ の 画面 の 要素 と DOM の 考え 方 に つい て 解説 し て きま し た 。 し か 
し 、DOM の 仕様 は これ だ け で は あり ませ ん 。DOM で は 、 オ ブ ジ ェクト の 要素 
を 操作 する 関数 や 、 オ ブ ジ ェクト に つい て 調べ た りす る 関数 も あり ます 。 し か し 、 
本 書 で は 誌面 の 都合 も あり 紹介 は し ませ ん 。 

より 詳細 な 情報 は 、DOM の 仕様 書 や 、Microsoft 社 、Netscape 社 が 提供 し 
て いる 資料 な ど を ご 覧 くだ さい 。 
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フェ 1 


イベ ント と は Web ペ ー ジ を 見 て いる ユー ザー が 人 行っ た 操作 の こと を 指し ます 。 
イベ ント か ら 特 定 の も の に 対し て アク ショ ン を 起こ すこ と に より 、 さ ま ざ ま な 処 


理 を 行う よう に スク リプ ト を 記述 し ます 。 


イベ ント に は どの よう な も の が ある か を 具体 的 に 挙げ る と 、 次 の よう な も の が 
あり ます 。 ま た 、 利 用 可能 な イベ ント を 表 で 一 覧 に し て お きま す 。 


フォ ー ム の ボタ ン を クリ ッ ク し た と き 
@⑱ ハ イ バ パー リン ク に な っ て いる 文字 列 を クリ ッ ク し た と き 
@Web ペ ー ジ が ロー ド さ れ た と き 


人 @」avaScript で 利用 可能 な イベ ント 


abort 


blur 


click 
change 


error 
focus 


load 


Imouseout 


ImOuSeOVe「r 
reset 


submit 


unload 


ユー ザー が イメ ー ジ の 読み 込み を 中 止 し た 
合 に 生じ る 。 た と えば 、 イ メー ジ の ダウ 
ン ロ ー ド 中 に 、 他 の リン ク や Web ブ ラウ ザ 

の 中 止 ボ タン を クリ ッ ク し た と き な ど 


Web ブ ラウ ザ 本 体 、Web ペ ー ジ 内 の フレ ー 
ム 、 フ ォ ー ム の ボタ ン な どか ら 、 ユ ー ザ ー の 
フォ ー カ ス が 離れ た 場合 に 生じ る 


ユー ザー が リン ク 上 や フォ ー ム 要素 上 で クリ 
ッ ク し た 場合 に 生じ る 


ユー ザー に よっ て 要素 (フォ ー ム フィ ー ル ド ) 
の 値 が 変更 され た と き に 生じ る 


ドキ ュ メ ント 、 イ メー ジ の 読み 込み エラ ー が 
起き た 場合 に 生じ る 


Web ブ ラウ ザ 本 体 、Web ペ ー ジ 内 の フレ 
ー ム 、 フ ォ ー ム の ボタ ン な ど に ユー ザー の 
フォ ー カ ス が 与え られ た 場合 に 生じ る 


Web ペ ー ジ が Web ブ ラウ ザ に ロー ド さ れ 

た と き に 生じ る 

ユー ザー が 領域 の 外 に カー ソル を 移動 させ た と き に 
生じ る 

ユー ザー が 領域 に カー ソル を 移動 させ た と き に 生じ る 
ユー ザー が reset ボ タン を クリ ッ ク し た と き に 生じ る 
ユー ザー が submit ボ タン を クリ ッ ク し た と 

き に 生じ る 

ユー ザー が Web ペ ー ジ か ら 出 る と き に 生じ る 
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onAbort 


onBlur 


onClick 
onChange 


onError 
onFocus 


onLoad 


onMouseOut 


onMouseOver 
onReset 


onSubmit 


onUnload 
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39qa1Aony 較 


較 イベ ント ハン ドラ 


Web ペ ー ジ に 対し て 、 ユ ー ザ ー が 操作 する こと で 、 さ ま ざ ま な イベ ント が 発 
生 し ます 。 ユ ー ザ ー が Web ペ ー ジ 上 の 何 も な いと ころ で クリ ッ ク し た と し て も 
イベ ント は 発生 し て いま す 。 つ まり 、 ユ ー ザ ー の ほとん どの 操作 に 対し て イベ ン 
ト が 発生 し て いる の で す 。 

し か し 、 通 常 は 何 も 起こ と り ま せん 。 こ れ は それ ぞ れ の イベ ント に 対応 し た 処理 
が 存在 し な いか ら で す 。 イ ベン ト の 中 か ら 目 的 の 場所 で 目的 の イベ ント を 取り 出 
す た め の 仕組 み を 、JavaScript で は 「 イ ベン ト ハ ンド ラ 」 と 呼ん で いま す 。 
JavaScript で の イベ ント ハン ドラ は 、HTML タ グ を 用 いて 記述 する 方 法 と 、 オ 
ブ ジ ェクト を 使っ て 記述 する 方 法 が あり ます 。 

主 な イベ ント ハン ドラ は 、 前 ペー ジ の 表 に 示し た と お り で す 。 


HTML タ グ を 用 いた イベ ント ハン ドラ の 記述 
HTML タ グ を 用 いた イベ ント ハン ドラ の 書式 は 、 以 下 の ひよ うに な り ま す 。 


<HTML タ グ イベ ント ハン ドラ = "]avaScript プ ログ ラム "> 


上 記 の よう な 記述 で 、 ユ ー ザ ー が HTML タ グ の 領域 上 で イベ ント ハン ドラ に 対 
応 し た イベ ント を 起こ し た と き に 、 指 定 し た JavaScript の プロ グラ ム が 実行 され 
ます 。 

イベ ント バハ ンド ラ に 与え る JavaScript ブ プロ グラ ム は 、 さ ま ざ ま な 書き 方 を する 
こと が で きま す 。 直接 プロ グラ ム を 記述 する こと も で きま すし 、 関 数 を 指定 する 
こと も で きま す 。 関数 を 指定 する に は 、 先 に 関数 を 定義 し て お く 必 要 が あり ま 
す 。 

た と えば 事前 に printstatus 関 数 が 定義 し て ある 場合 、 そ れ を 呼び 出す に は 次 
の よう な 記述 と な り ま す 。 


この 記述 で は 、 フ ォ ー ム の ボタ ン を クリ ッ ク し た と き (onclick) は 、print 
status 関 数 が 呼び 出さ れ 、 関 数 内 に 記述 され て いる 処理 が 行わ れ ます 。 
JavaScript の コマ ンド を 直接 記述 する 場合 は 、 次 の よう な 記述 に な り ま す 。 
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SECTION 2-11 を も イベ ント 


<1npu tyYpe="buEton" onC11oCkK=" 
if (va1ue>=4 ) {a1ert (You are Right!! ) : }) 


e1seta1ert("Oh no!"):} 





mW /> 


また 複数 の コマ ンド を 使用 し た い 場 合 に は 、「:」( セ ミコ ロン ) で 分 離す る こと で 
実装 で きま す 。 
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<1nput tyYDe="buton" Ono1iok=" 

appName = navigaor . appName 

a1ert ("あな た の web ブラ ウザ は '+appName+ ' で すね 。" ) 
6 人 


この よう に 、 イ ベン ト ハ ンド ラ に 対し て の JavaScript プ ログ ラム の 定義 に は 、 
2 種類 の 方 法 が あり ます 。 で は 、 ど ちら を 使う の ひ が よ い の で し ょ うか ? これ は 
イベ ント ハン ドラ に 対応 し た 処理 が どの よう な も の か で 決ま り ま す 。 

も し も HTML フ ァイル 内 で 1 回 し か 行わ れ な い 処 理 で 、 処 理 の スク リプ ト が 短 
いも の な ら ば 、HTML タ グ 内 の イベ ント ハン ドラ に 直接 処理 を 記述 し て し まう の 
が よい と 思い ます 。 し か し 、1 回 し か 行わ れ な い 処理 で も あま り に スク リプ ト が 
長い 場合 に は 、 視 認 性 や メン テ ナ ン ス 性 の こと を 考え て 、 関 数 を 定義 し て イベ ン 
ト ハ ンド ラ で 呼び 出す の が よい で し ょ う 。 

た と えば 、 次 の よう な コー ド は 視認 性 が よく あり ませ ん 。 


<1nput type="button" onc1iok=" 
if (va1ue>=4 ) { 
document .write (navigaor . appName ) : 
doCument .W エ 1Ee (naY マ ia 上 の エ . apDDY@G エ 8B1On ) 
び 
el1gse ifF(ya1ue==3 ) { 
a1ert ("この ペー ジ が ちゃ ん と 動く ? '): 
dooument .wriEe ( ' <A h エ GFF= リ "ネネ キ >!) 
} 


elset 
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wm /> 


この 視認 性 の 悪さ を 改善 する に は 、 ス クリ プ ト の 部 分 を 関数 に し て 、 呼 び 出す 
形式 に し ます 。 


<8BCript 1anguad@e= "avVa8Cript"> 
Funotion oheock( ) { 
1F (va1ue>=4 ) 
document .wr1te (nav1gator .appName ) 
documen .wr1Ee (naY1gdator . apDDVer81on ) 
} 
e1ge 1F(va1ue==3 ) { 
a1ert ("この ペー ジ が ちゃ ん と 動く 7!)』 


document .wr1te ( ' <A hreF="** ネ まま リ >!): 


e1get 


</ Cr1p キ > 
<Eorm> 
<1nput type="button" ono1iok="ocheck()" /> 


</ Eorm> 


また 、 呼 び 出す 処理 を 同じ Web ペ ー ジ 内 で 何 度 も 行う な ら ば 、 関 数 と し て 定 
義 し て 呼び 出す 形式 に する と 、 記 述 量 が 少な く な る た め 視 認 性 や メン テ ナ ン ス 性 
が 向上 し ます 。 

た と えば 、Web ペ ー ジ 内 に 複数 の フォ ー ム を 用 意 し 、 ユ ー ザ ー に 数 値 だ け を 
入力 させ た いと し ます 。 そ の と き 、 入 力 さ れ た 内 容 が 本 当 に 数 値 か どう か を チェ 
ッ ク す る 関数 を フォ ー ム ご と に 書い て いた ら 、 非 常に 面倒 な : こ と に な り ま す 。 そ 
こ で 、 数 値 か どう か を チェ ッ ク す る 関数 を 1 つ 記 述 し て お き 、 フ ォ ー ム か ら そ れ 
を 呼び 出す こと で 記述 量 を 減ら せま す 。 
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な お 、 イ ベン ト ハ ンド ラ は どの タグ に も 属性 と し て 付け られ る わけ で は あり ま 
せん 。 JavaScript の リフ ァ レ ンス を 確認 し て くだ さい 。 


一 オブ ジェ クト を 使っ た イベ ント ハン ドラ の 記述 

イベ ント ハン ドラ の 記述 と し て 、 オ ブ ジ ェクト を 使っ た 記述 も あり ます 。 
HTML 要 素 (タグ ) に イベ ント ハン ドラ を 設定 する 方 法 は 、 通 常 イ ベン ト ハ ンド ラ 
の 対象 を 特定 で きる 場合 に 用 いら れ ま す 。 そ の 代表 的 な も の と し て 、 各 種 フ ォ ー 
ム が あり ます 。 

これ に 対し て 、Web ブ ラウ ザ 全 体 の どこ で 起き て も よい よう な イベ ント (た と 
えば onkeydown や onload な ど ) は 、 特 定 の HTML 要 素 に 対し て イベ ント ハン 
ドラ を 設定 する の が 難し いこ と が あり ます 。 そ ん な と き に 使う の が 、 オ ブ ジ ェ ク 
ト に 対し て イベ ント ハン ドラ を 設定 する 方 法 で す 。 

書式 は 、 以 下 の ひよ うに な り ま す 。 


オブ ジェ クト . イ ベン ト ハ ンド ラ = 命令 : 
実際 の 記述 例 と し て は 、 次 の よう な も の に な り ま す 。 
@ ウ ィ ン ド ウ が リサ イズ され た と き resize_win 関 数 を 呼び 出す 


@ ド キュ メン ト 上 で キー が 押さ れ た ら key_down 関 数 を 呼び 出す 


この よう に オブ ジェ クト を 指定 し 、 そ れ に イベ ント ハン ドラ を 設定 する こと が 
で きま す 。 な お 、 通 常 の 関数 の 呼び 出し は 引数 を 取ら な い 場 合 で も 「( )] が 付く の 
で す が 、 こ の 書式 を 用 いた と き に は [( )」 を 付け ませ ん の で 注意 し て くだ さい 。 


りう 
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Cookie (クッ キー) 





賠 Cookie と は 


Web ブ ラウ ザ は 、 通 常 ユ ー ザ ー が 使っ て いる マシ ン の ロー カル ファ イル (クラ 
イア ント 側 ) に 情報 を 保存 する こと が で きま せん 。 こ れ は Web ペ ー ジ か ら ダ ウン 
ロー ド し て きた プロ グラ ム な ど を 勝手 に 保存 で きる よう に な っ て いる と 、 セ キュ 
リティ 上 問題 が あめ る か ら で す 。 し か し 、JavaScript を 用 いる と 「Cookie フ ァ イ 
ル 」 と 呼ば れる も の を クラ イア ント 側 に 保存 する こと が で きま す 。 

Cookie は 非常 に 単純 な も の で 、 あ る 決め られ た フォ ー マ ッ ト で 、 あ る 決め ら 
れ た 場所 に だ け 、 テ キス ト で 情報 を 保存 で きる と いう も の で す 。 そ の た め 、 
Web サ ー バ ー に 接続 し て きた ユー ザー に 発行 し た ID や 、Web ペ ー ジ を 使う 上 で 
の 設定 情報 を 保存 する と き な ど に 使い ます 。 


マ Cookie の 動作 





か 








1 初回 接続 要求 
2Cookie に 情報 が ある か 確認 。 な い の で 固有 ID の 発行 
3 固有 ID を Cookie に 保存 


を 4 

















42 回 目 以降 、 接 続 要求 
5Cookie に 情報 が ある か 確認 。 あ る の で 送信 要求 
6 固有 ID の 送信 (情報 の 送信 ) 





従来 、Web サ ー バ ー は 、 ユ ー ザ ー が 情報 を 入力 し て こない 限り 、 接 続 し て き 
た クラ イア ント が 誰 な の か を 特定 する こと が で き な か っ た た め 、 特 定 の ユー ザー 
に 対し て 、 特 定 の 動作 を 行っ た りす る こと は 実現 困難 で し た 。 し か し 、 そ れ で は 
イン トラ ネッ ト 上 な ど で の 業務 用 Web ア プリ ケー ショ ン を 作成 する こと が で き 
ませ ん 。 こ の よう な 問題 と セキ ュ リ ティ の 両方 を クリ ア し た の が Cookie で す 。 


24 


Cookie の 動作 は 前 ペー ジ の 図 の よう に な り ま す 。 JavaScript の プロ グラ ム は 、 
ある ユー ザー が Web サ ー バ ー に 接続 し た と き 、 そ の Web サ ー バ ー が 発行 し た ユ 
ー ザ ー を 特定 する ID が 保存 され て いる か どう か を 確認 し ます 。 も し も ID が な か っ 
た 場合 、Web サ ー バ ー は 次 回 以降 その ユー ザー を 特定 で きる よう に 固有 の ID を 
発行 し ます の で 、 こ れ を Cookie フ ァイル と し て 保存 し て お きま す 。 こ れ で 2 回 
目 以降 の 接続 で は 、 固 有 の ID の 確認 時 に 、ID を Web サ ー バ ー に 送る こと が で き 
ます 。 こ の 固有 ID を 使っ て 、、 ユ ー ザ ー そ れ ぞ れ に カス タマ イズ し た Web ペ ー ジ 
を 送っ た り 、 以 前 に 設定 され た 値 で 、 ユ ー ザ ー 固 有 の 処理 を 行っ た りす る こと が 
で きま す 。 

な お 、 実際 に は Web ブ ラウ ザ ご と に Cookie は 保存 され る の で 、 ユ ー ザ ー で は 
な く 、 あ る PC の Web ブ ラウ ザ を 特定 し て いる こと に な り ま す 。 





賠 Cookie の 制限 


Cookie は 非常 に 制限 され た 形 で クラ イア ント 側 に 情報 を 保存 する こと が で き 
ます 。 そ の 制限 と は 、 以 下 の よ うな も の で す 。 


久保 存 先 が 限定 され て いる 

信 一 定 の 書式 で し か 書き 込み が で き な い 
人 保存 形式 は テキ ス ト の み で ある 

@ ユ ー ザ ー に 関し て の 情報 は 送信 され な い 
例 他 の ドメイン の Cookie を 読み 出せ な い 


まず 保存 先 は 、 あ る 特定 の フォ ル ダ に 固定 され て いま す 。 そ こ 以 外 に は 保存 す 
る こと が で きま せん 。 保存 で きる 形式 は テキ スト の み で あり 、 そ の 記述 方 法 も 決 
まっ て いま す 。 ま た 、 重 要 な こと な の で す が 、 接続 し た 人 の 電子 メー ル ア ド レス 
や ハー ド デ ィ スク の 内 容 と いっ た 具体 的 な 情報 は 一 切 集 め る こと が で きま せん 。 
これ は 、 個 人 の 情報 を 勝手 に 読み 取れ な いよ うに する た め と 、 ウ イル ス な ど ロ ー 
カル マシ ン に 対し て 攻撃 を 加え る も の は 保存 で き な い よう に する た めで す 。 こ う 
いっ た 点 で 、 プ ライ バシ ー の 問題 も 解決 され て いる と いえ ます 。 

また 、 他 の ドメイン が 保存 し た クッ キー を 読み 出す こと は で きま せん 。 ここ で 、 
ドメイン と は 、URL の ドメイン 部 分 に 相当 し ます 。 た と えば 、 あ る Web ペ ー ジ 
の ドメイン 名 で 登録 され た クッ キー の 内 容 は 、 そ の ドメイン か らし か が 読み 出す こ 
と が な い の で す 。 
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マク ッ キ ー は 保存 し た ドメイン し が 読み 出せ な い 


39qanAony 較 


softbank.cojp ド メイ ン neko-no-te.net ド メイ ン 
Web サー バー Web ザー バー 
妥 
ーー-、Cookie を 保存 〒 





他 の ドメイン の Cookie の 
読み 出し 不可 








Cookie を 読み 出 じ ~-、 京 当 





還 Cookie フ ァイル の 保存 場所 


Cookie フ ァイル は どこ に 保存 され て いる の で し ょ うか ? これ は 使っ て いる 
OS や Web ブ ラウ ザ に よっ て 異な り ま す 。 た と えば 、IE と NN の 場合 に は 、 そ れ 
ぞ れ 次 の フォ ル ダ に 保存 され て いま す 。 


免 E と NN の OS 別 Cookie フ ァイル の 保存 場所 


| 電 朗 
6 Windows 98/Me (単独 利用 ) C:\Windows\Cookie\ 
IEe 村 Windows2000XP C:\Documents and Settings 
\<username>\Cookie\ 
[初期 設定 フォ ル ダ ] 内 の [Internet 


IE5 Macintosh Pe 


C:\Program files\Netscape 


Windows 98/Me \Netscape6\User\<username. 
\cookies.txt 
C:\Documents and Settings 
NN6 。 Windows 2000XP \<username>\Application data 


\Mozilla\Profiles\<username> 
\< セ ッ ト ア ッ プ 日 時 .sit>\cookies.txt 


[初期 設定 フォ ル ダ ] 内 の [Netscape 
Macintosh Users] 内 の [ユー ザー 名 ] 内 の 
[MagicCookie] 
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SECTION 2-12 $ Cookie (クッ キー) 


この 例 の よう に 、 そ れ ぞ れ の OS や Web ブ ラウ ザ ご と に 、 保 存 され る 場所 や フ 
ァイル 名 は 異な り ま す が 、 そ の こと を JavaScript の プロ グラ ム で 意識 する 必要 は 
あり ませ ん 。Cookie は アク セス し た サー バー の 名 前 か ら フ ァイル を 作成 、 ま た 
は キー を 作成 し て 情報 を 保存 し ます 。 そ の た め 、 保 存する ファ イル を いち いち 指 
定 し な く て よい の で す 。 


還 Cookie へ の 書き 込み 


Cookie へ の 書き 込み は 、document オ ブ ジ ェクト の cookie プ ロ パ ティ に 値 
を 代入 する こと に より 行い ます 。 
Cookie へ の 書き 込み は 、 次 の よう な 形式 で 行わ れ ま す 。 


document.cookie = "キー 名 = 値 ", expires = 期限 (GMT): 
path = URL バス : domain = サイ トド メイ ン : secure": 


この 中 で "キー 名 = 値 " だ け は 必ず 指定 し な く て は な り ま せん 。 他 の expires、 
path、domain、secure は 指定 し な く て も 、Web ブ ラウ ザ か が 適切 に 設定 し て 
くれ ます 。 た だ し 、expires を 設定 し な いと 、Web ブ ラウ ザ の 終了 と と も に クッ 
キー の 有効 期限 が 切れ ます 。 こ れ は 、 セ ッ シ ョ ン の 終了 まで が 有効 期限 と いう こ 
と で す 。 

それ ぞ れ の 属性 の 意味 は 、 次 の 表 の よう に な り ま す 。 


Cookie フ ァイル に 保存 され る デー タ の 変数 名 
name = 値 と 、 そ の 中 に 保持 され る 値 。 こ れ は 省略 する こ 
と が で き な い 


Cookie の 有効 期限 の 日 時 を 指定 する 。 こ の 日 
時 以降 は Cookie は 保存 され ず 、 サ ー バ ー に も 
expires = 期限 送信 され な い 。 こ の 日 時 の 指定 は グリ ニッ ジ 標 
準 時 で 行う 。 書 式 は 原則 と し て Wdy、DD- 
MM-YYYY、HH:MM:S5 と な る 


有効 な Cookie の URL の うち 、 パ ス の 部 分 を 指 
path = パス 定 す る 。 指 定 が な けれ ば 、 パ ス は Cookie を 設 

定 し た ドキ ュ メ ント と 同じ に な る 

有効 な Cookie の URL の うち 、 ド メイ ン の 部 分 
domain = サイ トド メイ ン を 指定 する 。 指 定 し な けれ ば 、 ド メイ ン は Cookie 

を 設定 し た ドメイン と 同じ に な る 

この 属性 を 記述 する と 、Cookie を 安全 な 接続 


secure だ け を 使っ て 送信 する よう に な る 
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車 川 川 川 川 証 較 還 


記述 の 例 と し て は 、 次 の よう な も の が あり ます 。 





上 の 1 つ 目 の 属性 は 、 省 略し た も っ と も 短い 指定 、 下 の 2 つ 目 は すべ て の 属性 を 
記述 し た 場合 で す 。 
較 Cookie の 読み 出し 


= Cookie フ ァイル へ の 保存 、 参 照 は document オ ブ ジ ェクト の 下 の cookie ブ ( 
ロバ ティ を 用 いま す 。 Cookie は 、 ド メイ ン ご と に 保存 され ます 。 


document.cookie ( 


参照 は 任意 の 変数 を myData と する と 、 次 の よう な 記述 で Cookie に 格納 され ' 
て いる 値 を 参照 する こと が で きま す 。 


この と き 読 み 出さ れる の は 、Web サ ー バ ー と 同じ 名 前 で 保存 され て いる デー 
タ の 内 容 で す 。 読 み 出 され る デー タ は 、 キ ー と 値 が 「=」 に より 連結 され た 文字 
列 で す 。 

キー= 値 


も し も 1 つの ドメイン で 複数 の Cookie を 保存 し て いる 場合 に は 、 キ ー と 値 の 
連結 され た も の が 、「:」 (セミ コロ ン ) に より 複数 連結 され た も の が 返さ れ ま す 。 


キー1= 値 1: キ ー2= 値 2: aa キーn= 値 n: 
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Cookie の 値 を 実際 に 使う に は 、 こ の 記述 で 返さ れる キー と 値 の 組み 合わ せ を 、 
何ら か の 形 で 変換 し な く て は な り ま せん 。 

通常 は Cookie を 読み 出す と き に Cookie の 値 が 空 で な いか が 確認 し て か ら 読み 
出し 、 さ ら に 変数 名 と 値 を 分 離す る 作業 が 必要 に な り ま す 。 

実際 に Cookie か ら 値 を 読み 出す 方 法 に つい て は 、SECTION12 の サン ブル ス 
クリ プ ブ ト を 参照 し こく だ さい 。 


賠 Cookie を 削除 する 


Cookie は 有効 期限 に な る と 自動 的 に 削除 され ます 。 し か し 、 有 効 期限 より 前 
に Cookie を 削除 し た く な る 場合 も ちり ます 。 こ の よう な と き に は 明示 的 に Coo 
kie を 削除 し な く て は な り ま せん 。 

Cookie の 削除 に は 特別 な メソ ッ ド が ある わけ で は あり ませ ん 。 ど の よう に 削 
除 す る か と いう と 、 有 効 期限 を 現在 の 時 刻 よ り も 過去 に する と いう 作業 を 行い ま 
す 。 ま ず Cookie に セッ ト す る 過去 の 有効 期限 を 生成 し ます 。 有 効 期限 の 作成 が 
で きた ら 、 そ れ を 削除 し た い Cookie の 書き 込み に 使い ます 。 


document.cookie="name=< 削 除 し た い cookie 名 >"』 "exptres= 
現在 より 過去 の 時 間 " : 


これ で 削除 し た い Cookie は 、 有 効 期限 が 切れ た こと に な る の で 削除 され る こ 


と に な り ま す 。 
具体 的 な サン ブル スク リプ ト は 、P.375 を 参照 し こく だ さい 。 
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2-13 


クロ ス ブ ラ ウザ 実現 の た め に 





ここ で は 、 い くつ か の Web ブ ラウ ザ で 同じ よう に 見 せ た り 、 処 理 を 分 割 し た 
りす る た め に 必要 な 基礎 知識 に つい て 解説 し ます 。 

現在 シェ ア の 高い IE と NN の 2 つの Web ブ ラウ ザ の 間 に は 、 同 じ ス クリ プ ト な 
の に 表示 結果 が 異な る と いう 互換 性 の 問題 が あり ます 。 し か し 、 不 特定 多数 の 
人 々 を 相手 に Web サ イト を 構築 し な く て は な ら な い 場 合 、 何 と し て で も 複数 の 
Web ブ ラウ ザ の 複数 の バー ジョ ン 、 か つ 、 複 数 の プラ ッ ト フ ォ ー ム で 動作 する 
よう に し な く て は な ら な いと いっ た こと が 起こ り ま す 。 こ の よう な と き に は 、 ど 
う や っ て 互換 性 を 保 て ば よい の で し ょ うか ? 

互換 性 を 保つ た め の 方 針 と し て は 、 次 の よう な も の が 考え られ ます が 、 そ れ ぞ 
れ 、 メ リッ ト ・ デ メリ ッ ト が あり ます 。 


互換 性 の 取れ て いる 部 分 だ け で Web ペ ー ジ を 制作 する 
メリ ッ ト : 制作 は 比較 的 容易 で ある 
デメ リッ ト : あま り 面 白 み の な い Web ペ ー ジ に な っ て し まう 


@Web ブ ラウ ザ ご と に 完全 に Web ペ ー ジ を 作り 分 ける 


メリ ッ ト : 最新 の 技術 を 使う こと が で き 、 豊 富 な 表現 が 可能 
に な る 

デメ リッ トド Web ブ ラウ ザ ご と に 作り 分 ける こと に より 、 制作 
コス ト が 高く な る 


コン テン ツ を 更新 する と き に 、 複 数 の WWeb ペ ー ジ 
に また が っ て 更新 し な く て は な ら な い 


Web ペ ー ジ 中 で 互換 性 の な い 部 分 だ け 処理 を 作り 分 ける 

メリ ッ ト : 比較 的 低い コス ト で 最新 の 技術 を 使い 、 魅 力 ある 
ペー ジ を 作成 で きる 
Web ブ ラウ ザ ご と に 複数 の コン テン ツ を 管理 し な 
く て も 済む 

デメ リッ ト : Web ブ ラウ ザ の 特性 な ど が わか っ た 上 で Web ペ 
ー ジ を 制作 し 、 な お か つ 最 新 技術 も 知ら な く て は 
な ら な い の で 、 高 度 な 技術 が 必要 と な る 
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この よう に さま ざま な メリ ッ ト 、 デ メリ ッ ト が あり ます が 、 ど の 方 法 が ベス ト 
か と いう こと で は な く 、Web サ イト 構築 に あめ た っ て どの よう な 要求 が 発生 し て 
いる か に よっ て 使い 分 ける べき で し ょ う 。 ま た 、 最 初 は 輸 の 共通 部 分 だ け を 使っ 
て 制作 し て いく と いう 方 法 を 取っ て お き 、 だ ん だ ん と Web サ イト を 成長 させ 、 
@ ま た は @ に 成長 させ て いく と いう 方 法 も あり ます 。 ど の 方 法 を 取る か に は 、 他 
の 技術 と の 兼ね 合い も ある の で 、 慎 重 に 考慮 し て 手法 を 選ん で くだ さい 。 


庫 Web ブ ラウ ザ の 判定 


それ ぞ れ の Web ブ ラウ ザ で 共通 に 動作 する 部 分 だ け を 使っ て スク リプ ト を 制 
作 す る の で な けれ ば 、 少 な く と も Web ブ ラウ ザ の 判定 が 必要 に な り ま す 。 こ の 
と き 何 を 基準 に Web ブ ラウ ザ を 判定 すれ ば よい の で し ょ うか ? JavaScript で 
利用 で きる も の を 考え た と き に は 、 以 下 の よ うな も の が ある で し ょ う 。 


@navigator オ ブ ジ ェクト か ら Web ブ ラウ ザ 情 報 を 取得 する 
人 @<script > 要素 で 分 類する 
@DOM の 違い に 注目 する 


田 navigator オ ブ ジ ェクト か ら Web ブ プラ ウザ 情報 を 取得 する 

最初 に 、userAgent プ ロバ パテ ィ や appVersion プ ロ パ ティ を 使っ て Web ブ ラ 
ウザ を 判別 する 方 法 に つい て 解説 し まし ょ う 。 

Web ブ ラウ ザ は 、 ダ ウン ロー ド し て きた HTML フ ァイル に 対し て 、Web ブ ラ 
ウザ の 情報 を 公開 し ます 。 そ の た め 、HTML フ ァイル に 含ま れ て いる スク リプ ト 
は 、Web ブ ラウ ザ 情 報 を 取得 する こと が で きま す 。 こ の と き 取 得する の は 、 
navigator オ ブ ジ ェクト の userAgent プ ロ パ ティ 、appVersion プ ロ パ ティ な 
ど で す 。navigator オ ブ ジ ェクト に より 取得 で きる 情報 に は 、 以 下 の よ うな も の 
が あり ます 。 
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これ ら の 情報 を 読み 出す に は 、 以 下 の よ うに 行い ます 。 


<htm1 > 

<tit1e>browser info</tit1e> 

<body bgco1or="#EEE8dc"> 

<h3>Browser Tnformation</h3> 

<hr /> 

<8Cript 1anguage="]ava8cript"> 

る すさ 
document .write( "appCodeName: " + navigator.appCodeName + "<br />") ヵ 
document .write("appName: " + navigator.appName +"<br />")』 
document .write("appVersion: " + navigator.appVer8ion + "<br />")』 
document .write("1anguage: " + navigator.1anguagde + "<br />"): 
document .write("platform: " + navigator.platform + "<br />")』 
document .write("ugerAgent: " + navigator.ugerAgent + "<br />"): 

7/--> 

</gscript> 

</body> 

</html> 


上 記 ス クリ プ ト を いく つか の Web ブ ラウ ザ で 表示 させ て みる と 、 次 の よう に 
な り ま す 。 


マ IE6 で の 表示 


良 browser info - Microsoft Internet Explorer 


イル) 編集 表示 ) お 気 に 入 DQ) ツー ル ① へ ルプ DD 





Browser Information 


ョ ppCodeName: Mbzilla 


ョ appName: Microsoft Internet Exnlorer 

appVersion: 4.0 (compatible: MSIE 6.0: Windows NT 5 1) 
language: undefined 

platform: Wind2 

userAgent: Mczila/4.0 (compatibls: MSIE 6.0: Windows NT 5.1) 
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マ NN6 で の 表示 


選 browser info - Netscape 6 


= アイ ル (F) 編集 E) 表示 び ) 検索 ⑤ ジャ ンプ ⑬ 
Browser Information 


| appCodcNamet IMozila 
appName: Netsca 


appVerslon: 5.0 0 (Wimdows ja-JP) 
| mguage: ja-JP 


serAgernt: Moztla/5.0 (Windows: U: Midows NT 1 JPz 
|:0.9.4) Cecko/20011019 Netscape6/6.2 





これ ら の 取得 で きる 情報 を 使っ て 、Web ブ ラウ ザ の 判定 を 行う スク リプ ト は 
P.108 で 紹介 し て いま す 。 


田 <Script> 要 素 で 分 類する 
Web ペ ー ジ に JavaScript を 埋め 込む に は <script> 要 素 が 必要 と な り ま す 。 こ 
の <script> 要 素 の 書式 は 、 以 下 の よ うに な り ま す 。 


<script 1anguage=" ス クリ プ ト 名 "> 


スク リプ ブ ト 名 の と ころ に は 「JavaScript1.2」 や 「JavaScript] と いっ た 文字 列 を 
記述 し ます 。 こ の 「JavaScript」 の 後ろ に 付い た バー ジョ ン 番 号 に よっ て 、 そ の 
<Script> 要 素 の 内 容 を 実行 する か どう か か が 判断 され ます 。 

な お 、HTML4.01 (http:/www.w3.org/TR/html4/) の 規格 で は 、language 
属性 は 非 推 間 と な っ て いま す 。 推奨 され て いる の は 、type 属 性 を 用 いた 記述 で 
す 。 


な お 、type 属 性 に 与え られ る 値 に は 「text/javascript1.3] な ど と 記述 し て も 
か まわ な い の で す が 、 現 在 この 記述 で JavaScript バ ー ジ ョ ン の 判定 が 正しく 行え 
る の は IE5 以 上 だ け で す 。 で すか ら 、 現 状 で は <script> 要 素 に より スク リプ ト を 
分 割 し た い 場合 に は language 属 性 を 使わ ざる を 得 ま せん 。<script> 要 素 へ の 
記述 に より スク リプ ト が 動く か 動か な いか は 、 次 の 表 の よう に な っ て いま す 。 
「 〇 」 が 入っ て いる の が 動く も の で す 。 
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ョ 9q コ 1AON 業 


language= "javascript1.5" 
language="javascript1.3" 
language="javascript1.2" 
language="javascript1.1" 


⑱| | ⑳ @ 
起 ⑤. 8 !⑨ 
95 1③! 0 
⑯ 人 ⑤ 量 (… 因 
0 | !M (6) 


language="javascript" 
type="text/javascript1.5" 
type="text/javascript1.3" 
type="textjavascript1.2" 
type= "textVjavascript1.1" 
type="texjavascript" 
language="Jscript" 
type= "texUJscript" 


6 @ @ 〇 加 
(5 9 9 瑞 
GDI | ( 瑞 の 
〇 
〇 


ここ まで 解説 し て くれ ば も うわ か る と 思い ます が 、JavaScript の 処理 を バー ジ 
ョ ン に より 分 けた い 場 合 に は 、<script> 要 素 の 書き 方 次 第 と いう こと に な り ま す 。 
た と えば 、JavaScript1.5 に 対応 し て いる Web ブ ラウ ザ に だ け 特 殊 な 処理 を さ 
せ た い と いう 場合 に は 、 以 下 の よ うな 記述 と な り ま す 。 


<Boript 1anguage= "ava8cript1.5"> 
Java8cript1 . 5 に 対応 し て いる Web ブ ラウ ザ の た め の 処 理 
</ Crip セ > 
<8Cript 1anguade= "avYa8cCript1 .3"> 
Java8cr+p1 . 3 に 対応 し て いる Web ブ ラウ ザ の た め の 処理 
//JavaScript1 .5 に 対応 し て いる Web ブ ラウ ザ も この 処理 を 行う 
</ BC エ ip モ > 


た だ し 、JavaScript の 新しい バー ジョ ン に 対応 し て いる Web ブ ラウ ザ は すべ 
て の 処理 を 行っ て し まう た め 、 こ の 方 法 が 適用 で きる 状況 は か な り 限 定 さ れる と 
思い ます 。 


軒 DOM の 違い に 注目 する 

Web ブ ラウ ザ の 判別 の 中 で も 、 バ ー ジ ョ ン や プラ ッ ト フ ォ ー ム は 気 に せ ず に 
IE と NN の 分 割 だ け を 行う な ら ば 、DOM の 違い を 利用 する の が も っ と も 簡単 な 
方 法 で す 。 た だ 、NN4 と NN6 は 非常 に 大 き な 違い が ある た め 、 最 近 で は IE5 以 上 
と NN6 は 同じ 処理 で 、NN4 だ け を 別 の 処理 に する 場合 が 多く な っ て き て いま す 。 
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SECTION 2-13 多 クロ ス ブ ラ ウザ 実現 の た め に 


その た め 、3 つ の オブ ジェ クト を 用 いて それ ぞ れ の Web ブ ラウ ザ の 判別 を し ま 
す 。 

本 書 で は IE で し か 動作 し な い "document.all" オ ブ ジ ェクト 、IE5 以 上 と NN6 
で し か 動作 し な い "document.getElementByld" オ ブ ジ ェクト 、NN4 で し か 
動作 し な い "document.Iayers" オ ブ ジ ェクト を 用 いま す 。 そ れ ぞ れ の オブ ジェ 
クト と 、Web ブ ラウ ザ の 動作 の 対応 は 以下 の よう に な っ て いま す 。 


document.all 
document.getElementByld ー ー 〇 O 
document.layers 〇 


で は 、 動 作 す る か どう か と いう の は どの よう に 調べ る の で し ょ うか ? 実は 非 
常に 簡単 で 、if 文 で オブ ジェ クト を 条件 式 に 使え ば よい の で す 。 条件 式 に 記述 さ 
れ た オブ ジェ クト が 動作 すれ ば true が 返っ て くる の で 、 呈 文 は 真 と な り ま す 。 

実際 に オブ ジェ クト を 使っ て 処理 を 分 ける スク リプ ト は 、 以 下 の よ うに な り ま 
す 。 


<htm1> 
< 上 it1e>brOwBer Beparate by DOM</ 上 1t1e> 
<body> 
<h3>browger cheok by DOM</h3> 
<hr /> 
<8BCript type="Eext /ava8C エ ipt"> 
に loo 
ifE(document .getE1ementByTd) { 
document .write("DOM OK (TE5+, NN6+)<br />"): 


1E (document .a11 ) { 


dooument .write("TE OK <br />"): 


FE (document .1ayers){ 


document .write("NN4 OK"): 
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ョ 39q ヨ 1AON 


9qnAony 較 


ん ん テッ 

</ 8Crip セ > 
</body> 
</htm1 > 


この スク リプ ト を 実際 に 動作 させ る と 、 以 下 の よ うに な り ま す 。 


ママ |IE6 で の 表示 


当 browser separate by DOM - Microsoft mternet Explorer 司 | 因 | 区 | 
フイ ル (F) 編集 GE) 表示 語 言 隔 証 ツル ① へ プ ⑬ し 2 


G・ の 還る の we 支 5mo 





browser check by DOM 


DOM OK E5+, NN6 や 
IE OK 





| ペー ジ が 表示 され まし た EEIT $J イントラネット 


マ NN4 で の 表示 


サ browser sepalete by DOM - Netscape 
プイ ル (F) 編集 (E) 表示) ジャ ン ブ ⑬) Communicator6) ヘル プ ⑱ 


browser check by DOM 





NN4 OK 


トキ ュ ル ト 売 了 。 





この よう に 、 た っ た これ だ け の 条件 式 で Web ブ ラウ ザ の 判定 が で きま す 。 た 
だ し 、OS に よる 違い を 検出 し て Web ペ ー ジ を 変え た いと いっ た 場合 や 、 細 か な 
バー ジョ ン の 違い に より 処理 を 分 離し た いと いっ た 場合 に は 、navigator オ ブ ジ 
ェクト か ら Web ブ ラウ ザ 情 報 を 格納 し て いる プロ パテ ィ を 使っ て 判定 する 必要 
が あり ます 。 
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BROWSER 










3-1 殺 王 六 1 政 ド 


ユー ザー が 使用 し て いる Web ブ ラウ ザ を 判定 する 





Web ブ ラウ ザ の 違い に よっ て 、 思 いも し な い Web ペ ー ジ の 見 え 方 に な っ て し 
まう こと が あり ます 。 特に DHTML や CSS、 さら に は 本 書 の 対象 で ある JavaScript 
も 、Web ブ ラウ ザ の 種類 や その バー ジョ ン に よっ て 動作 が 異な り ま す 。 

これ ら の 問題 を 解決 する に は どう し た ら よ いで し ょ うか ? 1 つ に は 、 ど の 
Web ブ ラウ ザ に も 共通 な 部 分 だ け を 使っ て Web ペ ー ジ を 制作 する と いう 方 法 が 
あり ます 。 し か し 、 こ れ で は で きる こと が 非常 に 限ら れ て し まい ます 。 そ こ で 、 
ユー ザー が 使用 し て いる Web ブ ラウ ザ を 判定 し 、 そ れ ぞ れ に 最適 化し た Web ペ 
ー ジ ヘ へ ユー ザー を 移動 させ る 方 法 が あり ます 。 


aasAoag 議 


強 Browser snjffer - Microsoft Internet Explorer 


イル 編集 表示 お 気 に 和 AD) ツー ル CD 人 プ ⑪ 
Web ブ ラウ ザ 判 定 


Internst Explorer6 で すね 


NN Browser sniffer - Netscape 6 


| アイ ル () 編集 表示 検索 G) ジャ ンプ G プッ 2 マー ク (⑧ 222D ルプ 
Web ブ ラウ ザ 判 定 





Netscape Navigator6 で すね 
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ETUGH 條 sniffer.html 


<htm1> 
<t ュ 1e> sn1 和 ffer</t ュ 1e> 
<Script 1anguage="]avascr1ipt"> 
く !-- 
Var ua, modei 
ua = nav1gator . userAgent: ーーーーーーーーーーーーーーーーーーーーー(D 
if(ua.indexOf("MSN 6", Oo) >= 0){ 
mode = 2: 
+ 
else if(ua.indexOf("MSTE 6",O) >= 0){ 
mode = 10j 
} 
else if(ua.indexOf( "MSTE 5",0) >= 0){ 
mode = 11: 
} 
else if(ua.indexOf("MSTE 4",0) >= 0){ 
mode = 12: 
} 
else if(ua.indexOf("Netscape6",0) >= 0){ 
mode = 20: 
} 
else if(ua.1ndexOf( "Mozi11a/4",0) >= 0){ 
mode = 21: 
} 
else{ 
mode = 99: 
} 
7/--> 
</ script> 
<body bgco1or="#ffT8dc"> 
<h3>Neb ブ ラウ ザ 判 定 </h3> 
<hr /> 
<Script 1anguage="]avascr1pt"> 
く !-- 
ュ f(mode==2 ){ 
document.write("MSN Exp1orer6 で すね \n"): 
} 


else if(mode==10){ 
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document .write( "Tnternet Explorer6 で すね \n") 
} 
else if(mode==11 ){ 

document.write( "Tnternet Explorer5 で すね \n" ) 
} 
ese if(mode==12 ){ 

document.write( "Tnternet Explorer4 で すね \n"): 


+ 
else if(mode==20){ 
document.write("Netscape Navigator6 で すね \n" ): 
+ 
else if(mode==21 ){ 
document.write("Netscape Navigator4 で すね \n") 


} 
e1se if(mode==99){ 
document .write(" そ れ 以 外 の Meb ブ ラウ ザ で すね w\n"): 
は 
7/--> 
</ script> 
</body> 
</htm1> 


有人 旧 4. 提 全 


Web ブ ラウ ザ は 、navigator オ ブ ジ ェクト に さま ざま な 情報 を 保持 し て お り 、 
それ を 利用 し て Web ブ ラウ ザ を 判定 する こと が 可能 で す 。 具体 的 に は user 
Agent プ ロ パ ティ に 入っ て いる Web ブ ラウ ザ 情 報 を 取り 出し 、 そ の 情報 を 使っ 
て Web ペ ー ジ を 訪れ た ユー ザー の Web ブ ラウ ザ を 判定 し ます 。userAgent プ 
ロ パ ティ に は Web ブ ラウ ザ に より 固有 の 文字 列 が 格納 され て いま す 。 

各 Web ブ ラウ ザ に 格納 され て いる 情報 は 、 次 ペー ジ の 表 の よう に な っ て いま 
す 。 こ の userAgent プ ロ パ ティ か ら 、Web ブ ラウ ザ を 特定 する の に 必要 な 情報 
を 取り 出し ます 。 
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SECTION 3-1 $ ユー ザー が 使用 し て いる Web ブ ラウ ザ を 判定 する 


Mozilla/4.0 (compatible: MSIE 6.0: Windows NT 
MSN Explorer6 5.0: .NET CLR 1.0.2914: MSN 6.1: MSNbMSFT: 

MSNmja-jp: MSNcOTH) 

Mozilla/4.0 (compatible: MSIE 6.0: Windows NT 


8 5.0: .NET CLR 1.0.2914) 

IE5 Mozilla/4.0 (compatible: MSIE 5.01: Windows NT 5.0) 

IE4 Mozilla/4.0 (compatible: MSIE 4.01: WinNT 5.0) 
Mozilla/5.0 (Windows: U: Windows NT 5.0: ja-JP: 

0 rv:0.9.2) Gecko/20010726 Netscape6/6.2 

NN4 Mozilla/4.78 [ja] (Windows NT 5.0: U) 


た と えば 、Web ブ ラウ ザ が IE6 か どう か を 判定 する た め に は 、「MSIE 6] と い 
う 文 字 列 が userAgent プ ロバ ティ 中 に ある か どう か を 確認 し ます 。 


navigator .ugerAgent . indexOf ( "MSTE 6')>=0 


これ は 「navigator.userAgent] で Web ブ ラウ ザ の 情報 を 参照 し 、indexOf 
メソ ッ ド で 文字 列 内 に 「MSIE 6] と いう 文字 列 が ある か どう か 調べ て いま す 。 な 
い 場 合 、indexOf メ ソ ッ ド は 「-1」 を 返し 、 条 件 は false と な り ま す 。 

サン ブル で は ① の 個所 で 、userAgent プ ロ パ ティ の 情報 を 取得 し て いま す 。 


いせ a= ロ aY1a ヒ OO .UBG エ AOGn 


変数 に 代入 し て いる の は 、 毎回 「navigator.userAgent」 と 書い て いる と コー 
ド が 長く 、 読 み づ ら く な る か ら で す 。 

次 に 、 識 別 文字 列 に つい て 考え て み ま す 。 こ の サン ブル で は 、 次 の Web ブ ラ 
ウザ に 関し て 識別 を 行っ て いま す 。 


MSN Explorer6 MSN6 


IE6 MSIE 6 
IE5 MSIE 5 
IE4 MSIE 4 
NN6 Netscape6 
NN4 Mozilla/4 
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aasAoag 較 


それ ぞ れ の ブラ ウザ を 、 識 別 文字 列 で 判定 し て いま す が 、userAgent の 情報 
の 表 に あっ た よう に 、 す べ て の Web ブ ラウ ザ に 「Mozilla」 と いう 文字 列 が 存在 
し 、MSN Explorer6、IE6、IE5、IE4、NN4 に は 、「Mozilla/4」 と いう 文字 列 
が 格納 され て いる 点 に 注意 し て くだ さい 。 そ の た め 、「Mozilla/4」 を 最初 に 持っ 
て くる と 、MSN Explorer、IE6、IE5、IE4 と NN4 が 区 別 で き な く な り ま す 。 

サン ブル の ⑧ の 部 分 で は 、 ま ず 、MSN Explorer6 を 他 の Web ブ ラウ ザ と 区 
別 で きる 「MSN 6] を 識別 文字 列 に 使っ て いま す 。 そ の 後 で 「MSIE 6」「MSIE 5」 
「MSIE 4] を 識別 文字 列 に 使い 判定 し て いま す 。 こ こま で で 、MSN Explorer と 
すべ て の IE の 判別 が で き て いま す 。 次 に NN6 と NN4 の 判別 で す 。NN6 に は 
「Netscape6」 と いう 文字 列 が userAgent プ ロバ ティ に 格納 され て いる の で 、 こ 
れ を 識別 に 使っ て いま す 。 

判定 が で きた ら 、 そ れ ぞ れ の 場所 で 変数 mode に 数 字 を セッ ト し て いま す 。 な 
お 、 変 数 mode の 値 は 次 の よう に 定義 し て いま す 。 


し es 
SN 





変数 mode の 値 が どの Web ブ ラウ ザ か を 表し て お り 、 こ れ を 使っ て 処理 を 分 
岐 さ せま す 。 今回 は <body> 一 </body> 内 の スク リプ ト で Web ブ ラウ ザ ご と に 
表示 させ る 文字 列 を 変え て いま す 。 


T I P S 


実際 に 実装 する と き に は 、「Web ブ ラウ ザ 判 定 の 処理 」 と 「WWeb ブ ラウ ザ ご と 
の 処理 ] を ひと まとめ に し て 記述 し な い ほ う が よ いで し ょ う 。 な ぜ な ら 、「Web 
ブラ ウザ ご と の 処理 ]」 は Web ペ ー ジ 内 の さま ざま な 場所 で 使う 可能 性 が あり 、 ひ 
と まとめ に し て 書い て し まう と 、 そ の た び ご と に 記述 する 必要 が ある た めで す 。 

サン ブル の スク リプ ト で は 、<body> タ グ の 前 で 「Web ブ ラウ サザ 判定 の 処理 
を 、<body> 一 </body> 内 で 「Web ブ ラウ ザ ご と の 処理 」 を 行っ て いま す 。 
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商い 陳 





Web ブ ラウ ザ は 、PC 環 境 に 依存 する た め 、 ユ ー ザ ー 環 境 は さま ざま で す 。 そ 
の た め 、 画 面 が 広い こと を 前 提 に し て いる コン テン ツ や 、 画 面 の 色 数 が 多い こと 
を 前 提 に し て いる コン テン ツ は 、 画 面 の 狭い PC や 表示 で きる 色 数 の 少な い PC で 
は 、 正 し く 表 示さ れ な い 可 能 性 が あり ます 。 そ ん な と き に は 、 事 前 に ユー ザー の 
PC 環境 を 調べ て お け ば 、 対 処 で きる こと が あり ます 。 


当 Display resolution and color depth - Microsoft Internet Explorer 


アイ ル (F) 編集 E) 表示 ) お 気 に 和 AD ツール ① ヘル プ ⑬ 


解像度 ・ 色 数 を 調べ る 





画面 の 広 さ は 1280 960 で す 。 


色 数 は 4294967296 色 で す 。 





4 埋 、」E displayInfo.html 


<htm1> 

<tit1e>Disp1ayTnfo</t ュ 1e> 

<body bgco1or="#fff8dc"> 

<h3> 解 像 度 ・ 色 数 を 調べ る </h3> 

<hr /> 

く Script 1anguage="]avascript"> 

< く !-- 
var displayMidth = screen.width: 
var displayHeight = screen.height: 


var cd = screen.co1orDepthj 
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document.write( "画面 の 広 さ は " + disp1ayMidth + "。 
回 "+ displayHeight + "で す 。<br />") 
document .write( " 色 数 は " + Math.pow(2,cd) + " 色 で す 。『"): 
7/--> 
</ Script> 
</body> 
</htm1> 


この スク リプ ト で は 、screen オ ブ ジ ェクト の width プ ロバ パテ ィ 、height プ ロ 
パテ ィ 、colorDepth プ ロバ ティ を 用 いて ユー ザー 環境 に つい て 調べ て いま す 。 

width プ ロバ パテ ィ は ディ スプ レイ の 幅 を 、height プ ロ パ ティ は ディ スプ レイ 
の 高 さ の 情報 を 格納 し て いま す 。 こ の と き 数 値 の 単位 は ピク セル (pixel) で す 。 

colorDepth プ ロ パ ティ は 、 デ ィ ス プレ イ の 色 を 表示 する た め に 用 いる カラ ー 
パレ ッ ト の ビッ ト 数 を 返し ます 。 こ れ は 1 ビク セル の 色 を 表現 する の に 、 ど れ だ 
け の ビッ ト を 使え る か を 表し ます 。 





この サン プル で は 、 返 され る ビッ ト の 値 を 色 数 に 変換 する た め に 、 次 の よう に 
記述 し て いま す 。 


この 記述 で は 、 返 され る 値 に 対し て 2 の べき 乗 を 行い 、 ビ ッ ト 数 か ら 色 数 に 変 
換 し て いま す 。 
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肖 A 喘い 喘 路 障 


Java が 有効 か どう か を チェ ッ ク す る 


navigator.]avaEnab1ed( ) 





Java ア プレ ッ ト が 動作 可能 か どう か を 調べ る スク リプ ト で す 。 た だ 、 最 近 で は 
Java ア プレ ッ ト を イン ター ネッ ト の Web ペ ー ジ 上 で 動作 させ る こと は か な り 少 
な く な っ て き て いま す 。 ま た 、Windows XP や IE6 は 標準 で は Java VM 
(Microsoft VM) が バン ドル され て いま せん 。 そ の た め 、 す べ て の Web ブ ラウ 
ザ で 、 必 ず し も Java が 動作 する わけ で は あり ませ ん 。 ま た 、Web ブ ラウ ザ 側 で 
Java ア プレ ッ ト が 動作 し な いよ うに 設定 し て ある 場合 も わり ます 。 こ の よう な と 
き の た め に 、Java ア プレ ッ ト が 動作 可能 で ある か どう か 調べ る 必要 が あり ます 。 


NN Java Check - Netscape 6 同 回 較 


。 プア イル (F) 編集 E) 表示 ( び ) 検索 G) ジャ ンプ ⑬⑯ ブッ クマ ー ク B) タス 22① ヘル プ ( い 
Java Check 








true 
Java ア プレ ッ ト が 

Java Applet は 動作 し ます 有効 の と き の 表示 
還 Jaya Check - Netscape 6 
。 アイ ル (F) 編集 E) 表示 (V) 検索 G) ジャ ンプ (G) ブッ カマ ー カ (B) 22D ヘル プ 
Java Check 
1 作 し ませ J プレ ッ ト が 

AA 1 t に ava ア 4 上 
Java Applet は 動作 し ませ ん 無効 の と き の 表 示 
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sasAoag 較 


aasAoag 識 





を java_check.html 


<htm1> 
<tit1e> ava Check</t ュ て]e> 
<Scrtpt 1anguage="]avascr1pt"> 
< く !-- 
function ]javaCheck( ){ 
if(navigator. avaEnab1ed( ) ){ 
document.write("]ava App1et は 動作 し ます 。"): 
} 
else{ 
document.write("]ava Applet は 動作 し ませ ん 。"): 


} 

7/--> 

</ Script> 

<body bgco1or="#fff8dc"> 

<h3>Java Check</h3> 

<hr /> 

<Script 1anguage="]avascript"> 

く !-- 
document.write(navigator.javaEnab1ed( ) + "<br />"): 
javaCheck( ) 

7/--> 

</ Script> 

</body> 

</htm1> 


「 


Java ア プレ ッ ト が 動作 可能 か どう か を 調べ る に は navigator オ ブ ジ ェクト の 
javaEnabled メ ソ ッ ド を 使い ます 。 書 式 は 以下 の ひよ うに な り ま す 。 


navigator . avaEnab1ed( ) 
この メソ ッ ド は Java ア プレ ッ ト が 動作 する な ら ば 「true」 を 、 Java ア プレ ッ ト 
が 動作 し な いと き に は 「false」 を 返し ます 。true な ら ば 「Java ア プレ ッ ト は 動作 


し ます 。」、false な ら ば 「Java Applet は 動作 し ませ ん 。」 と 表示 する よう に し て い 
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ます 。 こ の メソ ッ ド を 用 いて Java ア プレ ッ ト の 動作 の 可否 を 調べ 、 動 作 し な いと 三 
き に は 、Java ア プレ ッ ト を 動作 可能 に する に は どう し た ら よ いか を 表示 する よう ーー 
に し て お く と よい で し ょ う 。 


T I Lad S 


Windows の IE と NN で 、Java ア プレ ッ ト を 有効 に する 方 法 を 紹介 し て お きま 
す 。IE6 は 、 標準 で Microsoft VM (Java VM) を 搭載 し て いま せん が 、 必要 な と 
き に は 、Microsoft 社 の Web ペ ー ジ か ら ダ ウン ロー ド す る よう に な っ て いま す 。 

IE5 と IE6 の 場合 に は 、 メ ニュ ー バ ー で 【 ツ ー ル 】 一 【 イ ンタ ーネット オプ ショ ン 】 
を 選択 し 、[ イ ンタ ーネット オプ ショ ン ] ダ イア ログ ボッ クス の [セキ ュ リ ティ ] パ 
ネル を 開き ます 。 バ ネル 下 の 「 レ ベル の カス タマ イズ 」 ボ タン を クリ ッ ク し て 開く 
[セキ ュ リ ティ の 設定 ] パ ネル で 、Java の 設定 を 行い ます 。 





(ん 調 り ちび りり 戸 : わ ヨ 


「Java を 無効 に する 」 以 外 を 選択 
| する と 有効 に な る 


Java アプ レッ ト の 2 リブ ト 
O % イ 7 ログ を 表示 する 
無効 に する 
の 有 9 に する 吉 





NN4 や NN6 の 場合 に は 、 メ ニュ ー バ ー で 【 編 集 】 一 【 設 定 】 を 選択 し て 、[ 設 定 ] 
パネ ル を 開き ます 。「 カ テ ゴ リ 」 の 「 詳 細 ] を 選択 し た パネ ル で 、「Java を 有効 に す 
る 」 に チェ ッ ク を 入れ る と 、 有 効 に な り ま す 。 
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aasAoas 識 


3-4 ら 図 い 際 叉 い 呈 


必要 な プラ グイ ン が 動作 する か どう か チェ ッ ク 
navigator .mimeTypes[ プラ グイ ン の MTME タ イプ ] . 
enabledP1ugin 





この スク リプ ト は ペー ジ に 埋め 込ま れ て いる プラ グイ ン が 動作 する か どう か チ 
ェ ッ ク す る も の で す 。IE は この スク リブ ト で 使っ て いる 、navigator.mime 
Types を サポ ー ト し て いな いた め 動 作 し ませ ん 。 





Plugin Check - Netscape 6 
> ファ イル (F) 編集 (E) 表示 び ) 検索 ⑤) ジャ ンプ Q⑬) ブッ クマ ー が B) タス 2(①D ヘル プ ⑪ 


プラ グイ ンチ ェ ッ ク 




















プラ グイ ン 動 作 
する 場合 の 表示 


回 回 較 


Plugin Check = | 白 ※ 
> アイ ル (F) 編集 (E) 表示 (V) 検索 ⑤) ジャ ン ブ (⑬) ブッ クマ ー ク (B) 22C① ヘル プ ⑪ 


プラ グイ ンチ ェ ッ ク 










application/x-shockwave-Hash は 動き ます 








Netscape 6 













プラ グイ ン が 動作 


し な い 場 合 の 表示 application/x-shockwave-Hash は 動き ませ ん 





| 電設 2 plugincheck.html 


<htm1> 
<tit1e>P1ugin Check</tit]e> 
<body bgco1or="#fff8dc"> 
<h3> プ ラグ イン チェ ッ ク </h3> 
<hr /> 
< く Scrtpt 1anguage="]avascript"> 
く !-- 
var TargetPlugin="app11cation/x-shockwave-f1ash" : ーーーーーーー-(]) 
if(navigator.mimeTypes[TargetP1ugin] .enab1edP1ugn ){ ーーーーーー② 
document.write(TargetP1ugin, "は 動き ます "):+ 
e1se{ 
document.write(TargetP1ugin, "は 動き ませ ん "): 
} 
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7/--> 

< く / Script> 
</body> 
</htm1> 


スク リプ ト の ① の 部 分 で 確認 し た い プ ラグ イン を 設定 し て いま す 。 こ こ で は 、 
Macromedia 社 の Shockwave Flash が 動作 する か どう か を チェ ッ ク す る た め 
に 、Shockwave Flash の MIME タ イプ で ある 「application/x-shockwave- 
flash」 を 設定 し て いま す 。 実際 に プラ グイ ン が 動作 する か どう か は 、 
enabledPlugin プ ロ パ ティ を 用 いま す (⑧ の 箇所 )。enabledPlugin プ ロ パ テ 
ィ の 書式 は 、 次 の よう に な り ま す 。 


navigator .mimeTypes [ プラ グイ ン の MTIME タイプ] .enab1edP1ugin 


enabledPlugin プ ロ パ ティ に は 、 タ ー ゲ ッ ト と する プラ グイ ン が 動作 する な 
ら ば 「true」 が 、 動 作 し な い 場 合 に は 「false」 が 格納 され て いま す 。 そ れ を if 文 で 
判定 し て 分 岐 さ せ て いま す 。 こ こ で は 、5Shockwave Flash を チェ ッ ク し まし た 
が 、 こ れ 以 外 の 主要 な プラ グイ ン の MIME タ イプ は 、 次 の 表 の よう に な り ま す 。 





IE が 「navigator.mimeTypes」 を サポ ー ト し て いな い の は 、 プ ラグ イン に 対 
し て の 考え 方 に 違い が ある か ら で す 。Microsoft 社 で は Web ブ ラウ ザ に 新しい 
機能 を 組み 込む 場合 、ActiveX コ ント ロー ル で 提供 し よう と し て いま す 。 
ActiveX コ ント ロー ル は 、 そ の 機能 が イン ス トー ル さ れ て いな い 場 合 、 自 動 的 に 
イン スト ー ル まで 行う の で 、ActiveX コ ント ロー ル が 自動 的 に 組み 込め る よう に 
Web ペ ー ジ が 記述 し て あれ ば 問題 な い の で す 。 次 ペー ジ に shockwave Flash 
の ActiveX コ ント ロー ル を 自動 的 に 組み 込む サン プル を 挙げ て お きま す 。 埋 め 込 
み に は <object> タ グ を 用 い 、Shockwave Flash の ファ イル 名 は 「index.swfl 
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aasAoag 較 


aasAoaa 較 


と し ます 。 


plugin_activex.html 

<htm1 > 
<tit1e> プ ラグ イン チェ ッ ク </tit1e> 
<bod マ > 
<h3> プ ラグ イン チェ ッ ク -g1t:objectggt : タグ 版 </h3> 
<hr /> 
<BCrip 1anguad@e= "avagCript"> 
る = 
Yar ua=navigaOr .uSerAqGnt : 
ifF (document . 1ayers ) { 

Yar TargetP1ugin="app1iocation/x-ghoockwave-F1agsh": 

if (navigator .mimemypeg [TargetP1ugin] .enab1edP1ugin) { 

document .write(TargetP1ugin," は 動き ます 。 ") :} 
e1se{ 


document .write(margetP1ugin, "は 動き ませ ん 。pP1ugin を ダウ ン 


回 ロー ド し て くだ さい 。 『) 
} 

の 

こる 

</ 8C エ 1p セ > 


<obJeoct c1asg1id="oc1s1d:D27CDB6E-AE6D-11cF-96B8-4445535400 





名 00" codebase="http://down1oad.macromedia.com/pub/ 
還 shockwave/cabs/Elash/gwE1ash.cab#version=5,0,0,0" 
回 width="300" height="120" name="gw" 1d="gw"> 

<param name="Movie" Ya1ue="1ndex.BwE" /> 

<param name="qua1it" で a1ue="begt" /> 

<param name="p1ay" value="true" /> 


<embed gro="F1agh.swF" p1uginspage="/ghocjkwave/ 





回 down1oad / ndex . cg1?P1 Prod Vergion= 
回 ghookwaveFlash"type="app1ioation/x-shookwave-F1ash" 
回 w1dth="300" height="120" 1oop="true" qua1ity="best" 
回 bgco1or="#000000"> 
</ embed> 

</objeo セ > 

</bodY> 

</htm1 > 
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WINDOW 





AoaniA 上 


9 負い 交 再選 * 細 


新しい ウィ ンド ウ を 開く 


window.open( "URL', "ウィ ンド ウ 名 ' , "スタイル 『 ) 
window オ ブ ジ ェクト 名 .document .write( "表示 する テキ スト 「 ) 
window オ ブ ジ ェクト 名 .document.c1ose( ) 


ウィ ンド ウ を 新た に 生成 する スク リプ ト で す 。 生 成す る ウィ ンド ウ に は 、 識 別 
する た め の 名 前 を 付け て いま す 。 こ の スク リプ ト で は 、 フ ォ ー ム の ボタ ン を クリ 
ッ ク す る と 名 前 が 付い た ウィ ンド ウ が 現れ ます 。 





2 あっ まき ま 放せ 















計 ppen new window1 - Microsoft Internet Explorer 


ファ イル (FE) 編集 CD 表示 び ) お 気 に 和 AD⑱ ツール ①D ん ルプ ⑪ 


| 


ここ を クリ ッ ク す る と .… 















は 電 3 詳 3 YYTequiraYworks-2Y3 章 スカ リブ ト \newwindow1_html - Microsoft 
_- 。 | アイル 旨 集 6) 表示 ⑰ お 気 に 和 D⑯ ツ - ル CD ん JI プ ⑪ 
@* の 回 回る me 吉 iwoo 


アド L2D) | 署 ] boutblank 


Hello New Window 



















ED7EET7 彰 間 昌 


新しい ウィ ンド ウ が 開く 
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ツー ル バ ー 等 は 表示 され る 


の に 用 2EI newwindow 1 .html 


<htm1> 

<tit1e>open new window1</t ュ it1e> 

<script ]1anguage="]avascript"> 

く !-- 

function openMin( ){ 
var win1 = window.open(「「」'newwin1「」「)j ーーーーーーーーーーー② 
win1.document .write( '<h1>He11o New Mindow</h1>'), ーーーーーー(③) 
win1.document.c1ose( ): 一 ーーーーーーーーーーーーーーーーーーー④ 

} 

7/ --> 

</ Script> 

<body bgco1or="#fff8dc"> 

<h3> 新 し い ウ ィ ン ド ウ を オー プン (表示 指定 な し )</h3> 

<hr /> 

<form> 

<input type="button" value="Open Mindow" onc1ick="openMin()" /> 

</form> 

</body> 

</htm1> 


Web ペ ー ジ 上 に 配置 され た フォ ー ム ボタ ン を クリ ッ ク す る と 、<input> タ グ 
の onclick イ ベン ト ハ ンド ラ に よっ て openWVin 関 数 が 呼び 出さ れ ま す (① の 科 
所 )。openWin 関 数 で は 、 ウ ィ ン ド ウ を 新た に 開い て 、 そ の 新しい ウィ ンド ウ 
に 「Hello New Window」 と 書き 込ん る で いま す 。 新 た な ウィ ンド ウ を 開く に は 
window オ ブ ジ ェクト の open メ ソ ッ ド を 用 いま す 。 こ の メソ ッ ド は 、 以 下 の 形 
式 で 使用 し ます 。 1 


window.open('URL' ," ウ ィ ン ド ウ 名 ' , "スタ イル ' ) 


サン ブル で は ウィ ンド ウ 名 の み を 指定 し 、 そ れ 以 外 の パラ メー タ に つい て は 省 
略し て いま す (⑧ の 箇所 )。 こ の ウィ ンド ウ 名 は 、 そ れ ぞ れ の ウィ ンド ウ に リン ク 
を 張る と き に 、 タ ー ゲ ッ ト と な る ウィ ンド ウ を 指定 する た め に 使い ます 。 ま た 、 
新しく 生成 され た ウィ ンド ウ は 、 こ の サン プル 中 で は 変数 [win 1] と いう 名 前 で 
識別 され ます 。 ス タイ ル に 関し て は P.128 を 参照 し て くだ さい 。 
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次 に ③ で 、 新 た に 生成 し た win1 ウ ィ ン ド ウ に 文字 列 を 表示 させ て いま す 。 こ 
の よう に ウィ ンド ウ に 文字 列 を 表示 させ た い 場 合 は 、 次 の よう な 書式 に より 
window オ ブ ジ ェクト を 指定 し て 、write メ ソ ッ ド を 使い ます 。 


window オ ブ ジ ェクト 名 .document.write( ' 表 示す る テキ スト 「 ) 


"表示 する テキ スト ' に は タグ を 訪 め る こと も 可能 で すし 、 上 記 の 書式 を 並べ る 
こと に より 複数 行 の 文字 列 を 表示 させ る こと も で きま す 。 

文字 列 を 書き 込ん だ 後 、④ の よう に document オ ブ ジ ェクト を 閉じ る 必要 が 
あり ます 。 


window オ ブ ジ ェクト 名 .document.c1ose( ) 


この close メ ソ ッ ド を 忘れ る と 、 ス クロ ー ル バー が 表示 され な い 、 デ ー タ 読み 
込み 状態 の まま に な っ て し まう な どの 問題 が 起こ る こと が あり ます 。 


T Ii P S 


この スク リプ ト で は 、 ス タイ ル を 指定 し な いで ウィ ンド ウ を 開い て いま す が 、 
開か れる ウィ ンド ウ の 初期 値 は Web ブ ラウ ザ に よっ て 、 微妙 に 異な っ て いる よ 
う で す 。 

まず 「DISPLAY」 の 画面 4 見 て ち も ら えば わか る よう に 、Windows 版 の IE6 で は 
新しく 開か れる ウィ ンド ウ に 必ず すべ て の ツー ル バ ー と ステ ー タ スバ ー が 表示 さ 
れ ま す 。 こ れ に 対し て NN6 で は 、 元 の ウィ ンド ウ の スタ イル を 引き 継ぐ よう に な 
っ て いる よう で す 。 

一 方 、Macintosh 版 の Web ブ ラウ ザ で は 、 ツ ー ル バー の 類 は 一 切 表 示さ れ ま 
せん 。 さ ら に NN で は 、 ス クリ プ ト に より 開か れる も の は 通常 の ウィ ンド ウ と は 
属性 が 違う らし く 、 ツ ー ル バー な ど を 表示 させ る こと が で き な い うえ 、 ウ ィ ン ド 
ウサ イズ を 変更 する こと も で きま せん 。 
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親 ウ ィ ン ド ウ の スタ 
イル を 引き 継ぐ 





Macintosh 版 IE5 
で は 、 ツ ー ル バー 類 
が 表示 され な い 


アイ ル E) 編集 (E) 表示 ( 検索 ⑮) ジャ ンプ ⑬) ブッ クマ ー の (⑧ 





Hello New Window 














eA 


Macintosh 版 
NN6 で は 、 ウ ィ 
ンド ウサ イズ の 
変更 も で き な い 


oe 


べき file://wWorks-2 マ 


Open Window 









































Hello New Window 
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| 


| 





入学 和 ト 間 負 重 昭 


新しい ウィ ンド ウ を 開く (サイ ズ ・ ス タイ ル 指 定 ) 


ちょ っ と し た 注釈 や 説明 を 行う た め に 新しい ウィ ンド ウ を 開く こと は と て も 有 
効 で す 。 特に 注釈 の よう な 文章 は 、 そ の つど リン ク 先 に 飛ん で も 不便 で す 。 また 、 
江 小さ い ウ ィ ン ド ウ で 表示 し た いと き に 、 ツ ー ル バー な どの バー が 那 魔 に 感じ られ 

ミ 

F ゴ 

に 』 

に 】 

ミ 





た こと も ある か と 思い ます 。 こ こ で は 、 さ ま ざ ま な バー が 表示 され て いな い 別 ウ 


ィ ン ド ウ を 出現 させ て み ま す 。 












委 open new window 2 - Microsoft Imternet Explorer 司 回 | 


プイ ル () 編集 (5) 表示 お 気 に 入 D() ツー ル (①D へ JM プ ⑪ 
新しい ウィ ンド ウ を オー ブン (表示 指定 あり ) 

















[Peerae 」 ここ を クリ ッ ク する と 新 
し い ウィ ンド ウ か が 開く 









当 *YTequiraworks-2\3 章 スク リブ ト \newwindow2.. 司 | 区 | 








Hello New Window 


ツー ル バ ー や ステ ー タ スバ ー は 
一 切 表示 され な い 
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5 ) 信 MM 続 に ETYE newwindow ら .html 


<htm1> 
<tit1e>open new window 2</t ュ te> 
<Script 1anguage="]avascript"> 
< く !-- 
function openWin(){ 
var win1=window.open('','newwin1' "too1bar=no, 1ocation 
に | =no, Status=no,menubar=no, scro11bars=no , 
回 width=400,height=150') 
win1.document.write( "<body bgco1or=#FFCCCC>' ) 
win1.document.write( "<tab1e width="100%" height="100%">「): 
win1.document.write('<tr a1ign="center">! ): 
win1.document.write( '<td><h1>He11o New Mindow</h1></td>' ) : 
win1.document.write('</tr></tab1e>' ) 
win1.document.write( "</body>') 


win1.document.c1ose( ) 


} 
7/--> 
< く / Script> 


<body bgco1or="#fff8dc"> 

<h3> 新 し い ウ ィ ン ド ウ を オー プン (表示 指定 あり )</h3> 

<hr /> 

<form> 

<input type="button" value="New Mindow" onc1ick="openMin()" 

回 ルッ 

</form> 

</body> 

</htm1> 


DE 貞 に 記 さき 


基本 的 な 構造 は 前 項 で 紹介 し た も の と 同じ で す が 、 こ の サン プル で は 新しい ウ 


ィ ン ド ウ を 表示 する 際 の さま ざま な ステ ー タ ス を 指定 し て いま す (① の 箇所 )。 
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則 川 呈 目 当 昌 


OO1Da エ =noO , 1O 〇 Ca 上 On ロ =nO , 5 モ a 上 い =nO , menuDa エ =nO , BC て O1 1 Da エコ =nO , 
回 width=400, height=150 





これ ら は 、 ツ ー ル バー、 ロ ケー ショ ン バ パー、 ス テー タス バー、 メ ニュ ー バ パー、 
スク ロー ル バ ー の 表示 を それ ぞ れ 消す こと を 意味 し て いま す 。 も ちろ ん 、 消 し た 
い バ パー に つい て だ け 設 定 す る こと も 可能 で す 。 ま た 、 ウ ィ ン ド ウ の サイ ズ も 
width、height を 指定 する こと に より 行っ て いま す 。 数 値 は ビク セル で す 。 

ウィ ンド ウ を 開く に あたっ て 指定 で きる 主 な 項目 に は 、 以 下 の よ うな も の が あ 
り ま す 。 そ れ ぞ れ の 項目 は カン マ で 区 切っ て 並べ て くだ さい 。 


channelmode channelmode[=yesIno] に 0I1] no チャ ン ネ ルモード 
directories directories [=yesIno][=0I1] YeS ディ レク トリ バー の 表示 / 非 表示 


fullscreen fullscreen [=yesIno][=0I1] no フル スク リー ン モ ー ド 

height height = <pixel> 還 ウイ ンド ウ の 高 さ 

left left = <pixel> = デス クト ッ プ 左端 か ら の 座標 
location location [=yesIno][=0I1] YeS ロケ ーション バー の 表示 / 非 表示 
munebar menubar [=yesIno] に 0I1] yeS メニ ュー バー の 表示 / 非 表示 
resizable resizable [=yesIno][=0I1] YeS ウィ ンド ウサ イズ の 変更 可 / 不 可 
scrollbars scrollbars [=yesIno][=0I11 yeS スク ロー ル バ ー の 表示 / 非 表示 
status status [=yesIno][=0I1] YeS ステー タス バー の 表示 / 非 表示 
titlebar titlebar [=yesIno][=0I1] YeS タイ トル バー の 表示 / 非 表示 
toolbar toolbar [=yesIno][=0I1] yeS ツールバー の 表示 表示 

top top = <Pixel> ー デス クト ッ プ 上 端 か ら の 座標 
width width = <pixel> ー ウイ ンド ウ の 幅 


また ⑧ の 部 分 で は 、 新 し く 開 く ウ ィ ン ド ウ の バッ ク グ ラウ ンド カラ ー を 指定 す 
る と と も に 、「Hello New Window」 の 文字 が ウィ ンド ウ の 中 央 に 表示 され る 
よう な HTML ソ ー ス を 複数 の write メソ ッ ド に より 書き 込ん る で いま す 。 本 来 、 こ 
の よう かな 処理 の 場合 は 、 次 項 で 紹介 する 外部 ファ イル を 読み 込む 方 法 が 一 般 的 で 
す が 、 何 ら か の 理由 で 外部 ファ イル を 使い た く な い 場 合 は 、 こ の よう に write メ 
ソ ッ ド で すべ て の HTML ソ ー ス を 書き 込む 方 法 も あり ます 。 
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ウィ ンド ウ を 開き 、 外 部 ファ イル を 読み 込む 


window.open('URL', "ウィ ンド ウ 名 ' , ' ス タイ ル ' ) : 








新しく ウィ ンド ウ を 生成 する と き に 、 す で に ある HTML フ ァイル を 読み 込ん で 
表示 する スク リプ ト で す 。 通常 ウ ィ ン ド ウ を 開く 場合 に は も っ と も 多い 使い 方 で 
し ょ う 。 


open new window 3 - Microsoft Imternet Explorer 


編集 E) 表示 ) お 気 に 和 ADQ@ ツール ヘル プ bD 


外部 ファ イル を 表示 する 













ファ イル (FE) 





woaniA 較 





[LNew Wndow | ここ を クリ ッ ク す る と .… 


沸 conten.. 司 旧 隊 | 





| 軸 バー ジ が 示さ れ まし た 0 略記 


新しい ウィ ンド ウ が 表示 され 、 外 一 。| 
部 の HTML フ ァイル が 読み 込ま れ 
る 


(OU RI CE newwindowd3.html 


<htm1> 

<tit1e>open new window 3</t ュ t1e> 
<script 1anguage="]avascr1pt"> 

く !-- 


function openMin( ){ 
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AOqaNI A 較 


var win1 = window.open( 'openwincontents . htm1 ' , 
回 "newwin1' "too1bar=no , 1ocat1on=no , Status=no, 
回 menubar=no, scro11bars=no , width=150,height=150' ) 
+ 
7// --> 
</ script> 
<body bgco1or="#ffF8dc"> 
<h3> 外 部 ファ イル を 表示 する </h3> 
<hr /> 
<form> 
<nput type="button" value="New Mindow" onc1ick="openMin()" 
7> 
</form> 
</body> 
</htm1> 


Openwincontents.html 


<htm1> 

<tit]e>contents</t ュ it1e> 

<body bgco1or="navy" text="white"> 
<h3>He11o ]avaScript</h3> 

</body> 

</htm1> 


1 


ここ で も フォ ー ム ボタ ン を クリ ッ ク す る こと に より 、openWin 関 数 が 呼び 出 
され て 新しい ウィ ンド ウ が 表示 され ます 。 た だ し 、 こ れ ま で に 紹介 し た ウィ ンド 
ウ を 開く スク リプ ト で は 、open メ ソ ッ ド で 新しい ウィ ンド ウ を 生成 し た 後 、 
write メソ ッ ド で 表示 する 内 容 を 書き 込ん で いま し た が 、 こ の スク リプ ト で は 別 
の HTML フ ァイル を 新た な ウィ ンド ウ に 読み 込ん で いま す 。 

openWVin 関 数 を 見 て み ま し ょ う 。openWin 関 数 で は window オ ブ ジ ェクト 
の open メ ソ ッ ド に より ウィ ンド ウ を 生成 し て いま す 。 記述 は 次 の よう に な っ て 
いま す (① の 箇所 )。 
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これ まで 紹介 し た 例 と 異な っ て いる の は 、1 つ 目 の シ ング ルク ォ ー テ ーション 
内 に 、 読 み 込 むせ ファ イル の URL が 記述 し て ある こと で す 。 こ こ で は 、「open 
wincontents.html] と いう ファ イル 名 を 指定 し て いま す 。 次 に 、 ウ ィ ン ド ウ に 
対し て 「newwin1」 と いう 名 前 を 付け て いま す 。 

最後 に 、 ウ ィ ン ド ウ の さま ざま な 表示 設定 を 行っ て いま す 。 こ こ で は 、 ウ ィ ン 
ドウ に 表示 され る 一 連 の バー を 消す の に 加え て 、 新 し く 開 く ウ ィ ン ド ウ の サイ ズ 
が 幅 150 ピ クセ ル 、 高 さ が 150 ビ クセ ル に な る よう に 指定 を 行っ て いま す 。 詳し 
く は P.128 を 参照 し こく だ さい 。 


T I P S 


イン ター ネッ ト の 業界 で は 、 最近 「 ポ ッ プ アン ダー 広告 ] と いう も の が あり ます 。 
いく つか の サイ ト で は 、 ユ ー ザ ー が サイ ト を 訪れ た と き に 新しい ウィ ンド ウ を 開 
いて ポッ プア ッ プ 広告 を 出し ます 。 こ れ に 対し て ポッ プア ンダ ー 広 告 で は 、 ユ ー 
ザー が 見 て いる Web ブ ラウ ザ の 裏側 に も う 1 つ ウィ ンド ウ を 開い て 、 そ こ に コン 
テン ツ を 表示 する と いう こと を 行い ます 。 実現 方 法 と し て は 、 開 いた ウィ ンド ウ 
に 対し て 、blur メ ソ ッ ド を 用 いて ウィ ンド ウ か ら フ ォ ー カ ス を 外し ます 。 実際 に 
は 以下 の よう な 記述 に な り ま す 。 





し か し 、 こ の 手法 は あま り 用 いな い ほ う が よ いで し ょ う 。 確か に ユー ザー の 目 
に は と まる 手法 で す が 、 反 感 を 買う 可能 性 も あり ます 。 





AoqaniA 還 














screen .w1dth 
| Screen.heght 


ウィ ンド ウ を 開く の に 、 サ イズ 、 位 置 を 指定 で きる の は すでに 解説 し た と お り 
で す 。 こ こ で は さら に 発展 させ て 、Web ブ ラウ ザ が 表示 され て いる 画面 の サイ 
ズ ( 解 像 度 ) に 合わ せ て ウィ ンド ウ を 表示 させ て み ま す 。 








し 3 語 39 2 





1024X768 ビ ピク セル の 場合 
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javaS cript 


800X600 ビ ピク セル の 場合 


URIE newwindow4.html 


<htm1> 


<tit1e>open new window 4</tit1e> 


<Script 1anguage="]avascript"> 


く !-- 
var displayMidth = screen.width: 
var displayHeight = screen.height: 


function openMin( ){ 


回 
} 


var winMidth = disp1ayMidth/2: 

var winHe1ght = displ1ayHeight/2: 

var winLeft = displayMidth/4: 

var winTop = displayHeight/4: 

var optionString = "too1bar=no,1ocation=no , status=no, 
menubar=no, scro11bars=no,"j 

optionString += "width=" +winMidth + "。 height=" + 
winHeight + ",1eft=" + winLeft + "top=" + winTop 

Var win1 = window.open('openwincontents .htm1', 'newwin1'。 
optionString) 


NM 
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AoaniA 主 


// ェ => 

</ script> 

<body bgco1or="#fff8dc"> 

<h3> 解 像 度 に あわ せ て ウィ ンド ウ を 開く </h3> 

<hr /> 

<form> 

<input type="button" value="New Mindow" onc1ick="openMin()" 

回 /> 

</form> 

</body> 

</htm1> 


この サン ブ プル で は 、 デ ィ ス プレ イ の 解像度 に 合わ せ て 生成 する ウィ ンド ウ を コ 
ント ロー ル し て いま す 。 具体 的 に は ディ スプ レイ の 解像度 を 調べ た 後 、 デ ィ ス プ 
レイ の 解像度 の 幅 、 高 さ の それ ぞ れ 半分 の 長 さ を 持つ ウィ ンド ウ を 、 デ ィ ス プレ 
イ の 中 心 に 開き ます 。 そ の た め に は 、 ウ ィ ン ド ウ の 左上 端 を 、 画 面 の 左 隅 か ら 横 
に 1/4、 縦 に 1/4 ず らし た 位置 に 開く 必要 が あり ます 。 


画面 幅 の 1/4 


画面 高 さ 
の 17/4 


画面 幅 の 1/2 
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まず ディ スプ レイ の 解像度 を 調べ る に は 、screen オ ブ ジ ェクト の width プ ロ 
パテ ィ と height プ ロバ パテ ィ を 用 いま す 。 サ ンプ ル で は 、 そ れ ぞ れ の プロ パテ ィ 
か ら 取 得 し た 値 を 、 変 数 displayWidth、 変 数 displayHeight に 格納 し て いま 
す (① の 箇所 )。 

そし て 、 そ れ ら を 基 に し て 画面 の 幅 の 2 分 の 1、4 分 の 1、 画 面 の 高 さ の 2 文 の 1、 
4 分 の 1 の 値 を 計算 し 、 変 数 winWidth、 変 数 winHeight、 変 数 winLeft、 変 
数 winTop に 格納 し て いま す 。 た と えば 、 画 面 解像度 が 800X600 ピ クセ ル の 場 
合 は 、 次 の よう な 値 が 各 変 数 に 格納 され ます (⑧ の 箇所 )。 





これ ら の 変数 の 値 を 、 ウ ィ ン ド ウ を 開く と き の ス タイ ル を 指定 を 格納 し て いる 
変数 optionString の 文字 列 に 連結 し (③ の 箇所 )、 そ の 指定 を 用 いて ウィ ンド ウ 
を 開き ます (④ の 箇所 )。 た と えば 、 画 面 解像度 が 800X600 ピ クセ ル の と き 、 実 
行 さ れる スク リプ ト は 、 次 の よう に な り ま す 。 





この よう に する と 、 デ ィ ス プレ イ の 解像度 に 合わ せ て ウィ ンド ウ を 開く こと が 
で きま す 。 

な お 、IE で ウィ ンド ウ を フル スク リー ン で 開く 場合 に は 、screen オ ブ ジ ェ ク 
ト の width プ ロバ パテ ィ 、height プ ロバ パテ ィ を 使う より も 、open メ ソ ッ ド の 
fullscreenmn オ プシ ョ ン を 用 いる の が よい で し ょ う 。 
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AoaniA 較 





複数 の ウィ ンド ウ を 開く 





ここ まで ウィ ンド ウ の 開き 方 を 解説 し て を ま し た が 、 ど れ も 1 つ の ウィ ンド ウ 
に 対し て の コン トロ ー ル で し た 。 し か し 、1 つ だ けし か ウィ ンド ウ を 開け な いわ 
け で は あり ませ ん 。 複 数 の ウィ ンド ウ を 開く サン ブル を 紹介 し ます 。 


回 回 


ファ イル (E) 編集 (C) 表示 W) お 気に入り (⑱) ツー ル ① へ ルプ ⑪ ルク 


ここ を クリ ッ ク 





清 openwins - Microsoft Internet Explorer 





ここ を クリ ッ ク 





ウィ ンド ウ が 開く 
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昨 川 用 用 0WUUOP 


半 






詩 ppenwins - Microsoft Internet Explorer 周回 四 | 
ファ イル (F) 編集 CE) 表示 ) お 気に入り @) ウー ル ① へ ルプ ⑬) 


| 複数 の ウィ ンド ウ を コン トロ ー ル する 



















委 paei. 司 | 回 区 | 年 Paee 2 居 | 了 区 


Page 2 


ここ を クリ ッ ク 





ウィ ンド ウ が 開く 


SOURCE windowcontral3.html 


<htm1> 

<tit1e>openwins</ て ュ t1e> 
<Script 1anguage="]avascript"> 
く !-- 


function openMindow(c1ocation, wNo){ 





Var wNamei 
wName = "win" + wNoj 
var Scriptwin = window.open(c1ocation ,wName ,'too1bar=no, 
回 EFD 利和 BEM 和 0 
回 150') 
} 


//--> 





< く / 5cr1pt> 
<body bgco1or="#fff8dc"> 
<h3> 複 数 の ウィ ンド ウ を コン トロ ー ル する </h3> 
<hr /> 
<u1> 
<1i><a href="avascript: openMindow( 'test1 .htm1' 1 )" 
回 項目 1</a></ ユ > 
<1i><a href="]avascr1pt: openMindow( "test2.htm1' "27)j"> 
回 項目 2</a></11> 
⑲ 
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<1i><a href="]avascript: openMindow('test3.htm1' 3「)j"> 
回 項目 3</a></11> 
</u1> 
</body> 
</htm1> 


この サン ブル で は 「 項 目 1]、「 項 目 2]、「 項 目 3] と いう リン ク を 張ら れ た 文字 列 
が あり 、 そ れ ぞ れ の リン ク を クリ ッ ク す る と 、 そ れ ぞ れ 新 し い ウ ィ ン ド ウ が 表示 
され ます 。 ウ ィ ン ド ウ を 開く に は 、openWindow 関 数 を 呼び 出し ます 。 

この サン プル で 使用 する openWindow 関 数 は 、 こ れ ま で 登場 し た も の と 違っ 
て 、clocation と wNo と いう 引数 を 2 つ 持 っ て いま す 。clocation は 、 開 いた ウ 
ィ ン ド ウ に 読み 込む Web ペ ー ジ の URL で 、wNo は ウィ ンド ウ を 識別 する た め の 
番号 で す (① の 箇所 )。 

openWindow 関 数 内 で は 、 引 数 で 与え られ た ウィ ンド ウ を 識別 する た め の 番 
号 を 基 に ウィ ンド ウ の 名 前 を 生成 し て いま す 。 こ こ で は 「win」 と いう 文字 列 に ウ 
ィ ン ド ウ 番 号 (wNo) を 連結 し 、「wName」 に 代入 し て いま す (② の 箇所 )。 

その 後 、 変 数 clocation に 格納 され た URL と 生成 され た 名 前 wName を 基 に 、 
window オ ブ ジ ェクト の open メ ソ ッ ド を 用 いて ウィ ンド ウ を 開い て いま す (③ 
の 箇所 )。 た と えば ④ の 部 分 に お いて 、 実 際 に 実行 され る openWindow 関 数 の 
中 身 は 、 次 の よう に な っ て いま す 。 


この よう に 、 生 成す る ウィ ンド ウ 名 が 異な る と 、 す で に ウィ ンド ウ が 開い て い 
て も 新た に ウィ ンド ウ を 生成 する こと が で きま す 。 

用 語 解説 な ど で 複数 の ウィ ンド ウ を 開く 必要 が ある 場合 に 、 上 手 に 使っ て くだ 
さい 。 た だ し 、 あ まり た くさ ん ウィ ンド ウ を 開き すぎ る と 、 邪魔 に な る だ け で な 
く 動作 が 重く な っ て し まう と いっ た こと も 起こ る 可能 性 が あり ます 。 


4.6 e 還 い草 幼 い 喘 


ボタ ンク リッ ク で ウィ ンド ウ を 閉じ る 


window.c1ose( ) 





JavaScript を 使う と 、 自 分 自身 の ウィ ンド ウ を 閉じ て 終了 させ る こと が 可能 で 
す 。 こ の サン ブル は 、 自 分 自身 を 閉じ る と いう スク リプ ト で す 。 


疾 紅 塊 前 . 電 4 


午 Window Close - Microsoft Internet Explorer 
プイ ル (F) 編集 (EC) 表示 び ) お 気に入り ⑧ ツー ル ① ヘル プ ⑪ 


ボタ ン を 押す と ウィ ンド ウ が 閉じ ます 











| 還 
比 3| 








リン 








人 


ここ を クリ ッ ク す る と 
ウィ ンド ウ が 閉じ る 


RN Window Close - Netscape 6 同 回 四 本 | 
> アイ ル (F) 編集 (E) 表示 び ) 検索 G) ジャ ンプ (⑬) ブッ クマ ー ク (B) 2 が ① ヘル プ (B 


| ボタ ン を 押す と ウィ ンド ウ が 閉じ ます 
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AoaniA 識 





っ windowclose.html 


<htm1> 

<tit1e>Mindow C1ose</t ュ it1e> 

<body bgco1or="#fff8dc"> 

<h3> ボ タン を 押す と ウィ ンド ウ が 閉じ ます </h3> 
<hr /> 

<Torm> 


<1input type="button" value="C1ose" 


回 onc1ick= "window.c1ose()" /> 
</form> 

</body> 

</htm1> 

本 Eye 細 に 上 、S 


Web ペ ー ジ に は 、「close」 と 表示 され た フォ ー ム ボタ ン が 配置 され て いま す 。 
この ボタ ン を クリ ッ ク す る と 、Web ペ ー ジ が 閉じ られ ます 。 

ボタ ン に は 、<input> タ グ の onclick イ ベン ト ハ ンド ラ に よっ て 、 ウ ィ ン ド ウ 
を 閉じ る た め の メ ソ ッ ド が 呼び 出さ れ て いま す 。 ウ ィ ン ド ウ を 閉じ る に は 以下 の 
よう に 記述 し ます 。 


window.c1ose( ) 


これ は 、window オ ブ ジ ェクト に 対し て 使用 する メソ ッ ド で す 。 こ の close メ 
ソ ッ ド が 行わ れ た window オ ブ ジ ェクト は 閉じ ます 。 パ ラメ ー タ の 指定 は あり 
ませ ん 。 新しく 生成 し た ウィ ンド ウ や 、 別 の ウィ ンド ウ に 対し て も 実行 で きま 
す 。 

な お 、Windows 版 の IE4 以 降 で は 、 デ フォ ルト ウィ ンド ウ を 閉じ よう と する 
と 、 確 認 の ダイ アロ グ が 表示 され ます 。 こ れ は セキ ュ リ ティ 対策 の た め に 導入 さ 
れ ま し た 。 


icrosoft Internet Explorer 


ウィ ンド ウ は 、 表 示 中 の Web ペー ジ に より 閉じ られ よう と し て (ます 。 
この 0 ウィ ンド 7 を 開 じ ます が ? 


ーー ][ eX 確認 の た め の ダ イア ログ ボ 


ックス 
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ボタ ンク リッ ク で ウィ ンド ウ を 開閉 する 


window オ ブ ジ ェクト 名 .c1ose( ) 








新た な ウィ ンド ウ を 開く だ け で は な く 、 ウ ィ ン ド ウ を 閉じ る こと も 大 事 な 作業 
の 1 つ で す 。JavaScript で は 、 当 然 の こと な が ら ど ちら の 作業 も 行う こと が で き 
ます 。 こ こ で は 、 そ れ ぞ れ の 作業 を 行う スク リプ ト を 紹介 し ます 。 











公 Window Control 2 - Microsoft Imternet Explorer 司 回 層 | 
イル F) 編集 E) 表示 ) お 気に入り DQ) ウー ル ① ヘル プ ゆ 


ウィ ンド ウ の 開閉 











ここ を クリ ッ ク 
する と ウィ ンド 
ウ が 表示 され る 





[LNew Window | | Close Window 





PT 





Hello 
ここ を クリ ッ ク す る 
と 開い た ウィ ンド ウ 
が 閉じ る 


Ki Sh windowcontrol.html 


<htm1> 

<tit1e>Mindow Contro] 2</t ュ t]e> 
<Script 1anguage="]avascr1pt"> 
く !-- 


var win1j 


function openMin( ){ 


win1=window.open( 'openwincontents .htm1' "newwin' 


回 "too1bar=no, 1ocation=no , status=no,menubar=nO, 
回 scro11bars=no,width=150 , height=150' ) 
上 
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AOqNI A 較 


function c1oseMin( ){ 
if(win1 .c1osed == fa]se){ 
win1.c1ose( ) : 


+} 
e1se{ 
alert(" す で に ウィ ンド ウ は 閉じ られ て いま す "): 


} 

// こ =-> 

</ scr1pt> 

<body bgco1or="#fff8dc"> 

<hs> ウ ィ ン ド ウ の 開閉 </h3> 

<hr /> 

<Tform> 

<input type="button" value="New Mindow" onc1ick= 

回 "openMin()" /> 


<input type="button" value="Close Mindow" onc1ick= ① 
回 "closeMin()" /> 


</form> 
</body> 
</htm1> 


DE 千 -A 上 上 る 


この スク リプ ト は 、 こ れ ま で 紹介 し た ウィ ンド ウ を 開く スク リプ ト と 、 閉 じ る 
スク リプ ト を 組み 合わ せ た も の で す 。Web ペ ー ジ 上 に は 2 つの フォ ー ム ボタ ン が 
配置 され て お り 、 左 側 の [ New window ] は ウィ ンド ウ を 開く ボタ ン 、 右 側 の 
[し Clpss wndoew ] は ウィ ンド ウ を 閉じ る ボタ ン で す 。 

[LNew window ] を クリ ッ ク す る と 、<input> タ グ の onclick イ ベン ト ハ ンド ラ 
に よっ て openWin 関 数 が 呼び 出さ れ ま す 。openWin 関 数 は window オ ブ ジ ェ 
クト の open メ ソ ッ ド を 用 いて 新た に ウィ ンド ウ を 開き ます 。 

また 、 こ の スク リプ ト で は 親 ウ ィ ン ド ウ か ら 子 ウ ィ ン ド ウ を 消す と いう 機能 
実装 し て いま す 。 ウ ィ ン ド ウ を 消す 操作 は [_Clese wmdow ] を クリ ッ ク し て close 
Win 関 数 を 呼び 出す こと で 行い ます (① の 箇所 )。 

closeWin 関 数 で は まず 、 ウ ィ ン ド ウ を 消す 対象 と な る ウィ ンド ウ が 開か れ て 
いる か どう か を i 文 に より 確認 し ます 。 こ の 確認 に は window オ ブ ジ ェクト の 
closed プ ロ パ ティ を 用 いま す 。closed プ ロバ ティ は 対象 と な る ウィ ンド ウ が 閉 


142 


じ ら れ て いる 場合 に は true を 、 開 か れ て いる 場合 に は false を 返し ます 。 そ の た 
め 、closed プ ロバ ティ の 値 が false の 場合 に ウィ ンド ウ を 閉じ る 処理 を 行い ます 
(② の 箇所 )。 ウィンド ウ を 閉じ る に は window オ ブ ジ ェクト の close メ ソ ッ ド を 
用 いま す 。 


window オ ブ ジ ェクト 名 .c1ose( ) 


P.139 で 紹介 し た も の は window オ ブ ジ ェクト と し て 、 呼 び 出し た ウィ ンド ウ 
自身 を 表す 「window」 を 使っ て いま し た が 、 こ の スク リブ ト で は 生成 し た ウィ 
ンド ウ の オブ ジェ クト で ある 「win1」 を 用 いま す 。 そ の た め 、 ウ ィ ン ド ウ を 閉じ 
る 部 分 の 記述 は 以下 の よう に な り ま す 。 


win1 と いう window オ ブ ジ ェクト に 対し て close メ ソ ッ ド を 使用 する こと に 
よっ て 、openWin 関 数 に より 生成 され た ウィ ンド ウ が 閉じ られ ます 。 

また ウィ ンド ウ が すでに 閉じ られ て いる 場合 は 、「else 人 [| 以下 の 命令 が 実行 さ 
れ て アラ ー ト が 表示 され ます 。 





今回 の サン プル で は 動作 の 確認 の た め に 、 ア ラー ト を 表示 し て いま す が 、 実際 
に 用 いる 際 に は 、 ア ラー ト を 表示 する 必要 は な いで し ょ う 。 ま た 、 同 様 に ウィ ン 
ドウ を 閉じ る 処理 を 行う とき に は 、 必 ず closed プ ロバ パテ ィ に より ウィ ンド ウ の 
状態 を 確認 する よう に し まし ょ う 。 
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責 ド ' 障 1 計 1 
ウィ ンド ウ の サイ ズ を 変更 する 


window オ ブ ジ ェクト 名 .res1zeTo( ウ ィ ン ド ウ の 横幅 , ウ ィ ン ド ウ の 縦 幅 ) 


window オ ブ ジ ェクト 名 . outerMidth= ウ ィ ン ド ウ の 横幅 


window オ ブ ジ ェクト 名 .outerHeight= ウ ィ ン ド ウ の 縦 幅 





















Web ペ ー ジ ロー ド 時 に 、 ウ ィ ン ド ウ の サイ ズ を 、 指 定 し た サイ ズ に 変更 する 
スク リプ ト で す 。 新た に ウィ ンド ウ を 開く と き に は 、open メ ソ ッ ド を 用 いて サ 
イズ を 指定 する こと が で きま す が 、 す で に 開い て いる ウィ ンド ウ の サイ ズ を 変更 
する こと は で きま せん 。 し か し この スク リブ プ ト で は 、Web ペ ー ジ を ロー ド す る 
と と も に 、 す で に 開い て いる ウィ ンド ウ 自 体 の サイ ズ を 変更 する こと が で きま 


回 等 wndow resize - Microsoft r. 全 | 困 | 了 区 


アイ ル () 編集 D 表示 お 気 に 入 ” 往 
@②%- の - 図 較 「 選 
Window を サイ ズ 指 定 で 開く 





この ウィ ンド ウ は 、 
幅 . 300 ウィ ンド ウ が 開い た 後 、 
自動 的 に リサ イズ され る 


高 さ . 30o 
で 開か れ て いま す 。 





3 イン ト 3 ネ 5 ト 。 


window resize - Netscape 6 


| ido を サイ ズ 指定 で 開く 





引 この ウィ ンド ウ は 、 
幅 : 300 

| 高 さ : 300 

| で 開か れ 
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NolN に 3 人 1 resizewindow 1 .html 


<htm1> 


<tit1e>window res1ze</ ュ 1e> 


<script 1anguage="]avascr1pt"> 

< く !-- 

var ua = navigator.userAgent: 

var winWMidth = 300: //Mindow の 幅 
var winHetght= 300: //Mindow の 高 さ 


if( ua.indexOf( "MSTE",0) >=O ){ 
window.resizeTo(winMidth, winHeight) 

} 

else if( ua.indexOf( "Netscape6",0)>=0O | | ua.indexOf( 


回 "Mozi11a/4",0)>=0){ 


window.outerMidth = winMidth: 
window.outerHeight = winHeight: 





} 
7/--> 
</ script> 


<body bgco1or="#fFff8dc"> 
<h3>Mindow を サイ ズ 指 定 で 開く </h3> 
<hr /> 

この ウィ ンド ウ は 、<br /> 


<script 1anguage="]avascript"> 
く !-- 
document.write(" 幅 : " + winMidth + "<br />"): 
document.write( " 高 さ : " + winHeight + "<br />")j 
7/-=> 


</ Script> 
で 開か れ て いま す 。 


</body> 
</htm1> 
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この サン プル で は 、Web ペ ー ジ が ロー ド さ れる と ウィ ンド ウ が 縦 300 ピ クセ 
ル 、 横 300 ピ クセ ル に リサ イズ され ます 。 し か し 、 た だ 単純 に リサ イズ する メソ 
ッ ド を 実行 し て いる だ け で は あり ませ ん 。 

ウィ ンド ウ を リサ イズ する 場合 は 、window オ ブ ジ ェクト の resizeTo メ ソ ッ 
ド を 、 次 の 書式 で 使用 し ます 。 


window オ ブ ジ ェクト 名 .resizeTo( ウ ィ ン ド ウ の 横幅 , ウ ィ ン ド ウ の 縦 幅 ) 


し か し な が ら resizeTo メ ソ ッ ド は ちょ っ と し た 問題 を 抱え て いて 、IE と バー 
ジョ ン 4 以 前 の NN で は リサ イズ され た あと の サイ ズ が 異な り ま す 。 た と えば 、 以 
下 の よ うな 記述 で り リサ イズ し た と し ます 。 


この コー ド を 訪 お HTML フ ァイル を IE6 と NN4 で 表示 させ る と 、 下 の 図 の よう 
に な っ て し まい ます 。 


window resize - Netscape 


300 ピ クセ ル 





これ は 、resizeTo メ ソ ッ ド の サイ ズ の 解釈 が それ ぞ れ 異な る か ら で す 。 IE で 
は ウィ ンド ウ の 人 外 枠 、NN4 以 前 の バー ジョ ン で は ドキ ュ メ ント 部 分 の 大 き さ と 解 
釈 さ れ ま す 。NN6 で は IE と 同じ よう に 解釈 され ます の で 問題 あり ませ ん が 、 
NN4 以 前 の バー ジョ ン を 使用 し て いる ユー ザー を 切り 捨て る わけ に は いき ませ ん 
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の で 、resizeTo メ ソ ッ ド だ け を 上 単純 に 使用 する こと は で きま せん 。 
そこ で 、NN に 用 意 さ れ て いる outerHeight プ ロ パ ティ と outerWidth プ ロ 
パテ ィ を 使用 し ます (① の 箇所 )。 


window オ ブ ジ ェクト 名 .outerMidth= ウ ィ ン ド ウ の 横幅 
window オ ブ ジ ェクト 名 .outerHeight= ウ ィ ン ド ウ の 縦 幅 


サン ブル で は これ ら を 用 いて 、 ど ちら の Web ブ ラウ ザ で も 同じ よう に 処理 さ 
れる スク リプ ト に し て いま す 。 

本 サン ブル で は 、IE と NN の 処理 を 分 け て 記述 し て いま す 。 そ の 分 離 に 用 いて 
いる の が ②③ と ③ の 部 分 で す 。IE ま た は MSN Explorer は userAgent プ ロ パ ティ 
(P.111 参 照 ) の 文字 列 に 「MSIE」 が 必ず 入っ て いる た め 、 ま ず こ の 文字 列 で 取り 
出し ます 。 取り 出し た IE で は resizeTo メ ソ ッ ド が 実行 され ます 。 その 後 で NN は 、 
NN4 が 「Mozilla/4]、NN6 が 「Netscape6」 と いう 文字 列 が 入っ て いる の で 、 こ 
れ で 取り 出し ます 。 そ の 結果 、outerHeight プ ロ パ ティ と outerWidth プ ロ パ 
ティ に それ ぞ れ 高 さ と 幅 が 設定 され ます 。 

Web ブ ラウ ザ の 判定 は 、 必 ず IE ま た は MSN Explorer の 判定 か ら 行っ て くだ 
さい 。 も し も 文字 列 「Mozilla/4」 で の 判定 を 最初 に 行っ て し まう と 、IE や MSN 
Explorer も 取り 出さ れ て し まい ます 。 こ れ は IE や MSN Explorer に も 文字 列 
「Mozilla/4]」 が 含ま れ て いる た めで す 。Web ブ ラウ ザ の 判定 方 法 に 関す る 詳細 
は 、P.108 を 参照 し て くだ さい 。 

この よう に し て Web ブ ラウ ザ ご と に 記述 を 分 ける こと に より 、IE と NN で 同様 
に 動作 する リサ イズ の スク リプ ト を 実現 し て いま す 。 

な お 、IE に 実装 され て いる JScript に は resizeTo メ ソ ッ ド は 存在 し ませ ん 。 実 
は IE で は 、resizeTo メ ソ ッ ド は DHTML に 実装 され て いま す 。 そ の た め 、 リ フ 
ァ レ ンス な ど を 探す 場合 に は 気 を 付け て くだ さい 。 
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woquiA 還 


AoaniA 較 





ら 員 了 
ウィ ンド ウ の 位置 を 変更 する 


window オ ブ ジ ェクト 名 .moveTo(x 座 標 , y 座 標 ) 


h 議 癌 1 





















ウィ ンド ウ を 、 デ スク トッ プ の どこ に 表示 させ る か 指定 する こと が で きる スク 
リプ ト で す 。 複数 の ウィ ンド ウ を 配置 する 場合 な ど に 使う と 便利 で し ょ う 


し 症 人 間 明記 』 


| ず こ の 位置 に 表示 され る 








ウ う 国人 る 
Window の 位置 を 指定 する 


この ウィ ンド ウ は 
上 か ら .( 





左 か ら :0 
に 開か れ て いま す 。 


| @] バー ジ が 表れ まし た 


古 . 
PWMindows 


Professional 
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に 人間 8 - movewindow 1 .html 


<htm1> 


<t ュ 1e>move window</ モ ュ ト 1e> 


<Script 1anguage="]avascript"> 
<!-- 

var winTop = O0j | 

var winLeft = 0j 
window.moveTo(winTop, winLeft): 


//--> 


く / script> 





<body bgco1or="#Fff8dc"> 
<h3>Mindow の 位置 を 指定 する </h3> 
<hr /> 

この ウィ ンド ウ は 、<br /> 


<Script 1anguage= "avascript"> 
document.write(" 上 か ら : " + winTop + "<br />"): 
document.write(" 左 か ら : " + winLeft + "<br />"): 
7/--> 


</ script> 


に 開か れ て いま す 。 
</body> 
</htm1> 


DE SACMSE 


この サン ブル で は 、Web ペ ー ジ の ロー ド 時 に ウィ ンド ウ の 位置 を 左 隅 に 移動 
し て いま す 。 ウ ィ ン ド ウ を 動か す メ ソ ッ ド は moveTo メ ソ ッ ド で す 。moveTo 
メソ ッ ド の 書式 は 、 以 下 の よ うに な り ま す 。 


window オ ブ ジ ェクト 名 .moveTo(x,y) 


(5 


こ で x、y は 、 位 置 を 指定 し た い ウ ィ ン ド ウ の 左上 端 の 座標 を 指定 し ます 。 座 
標 は 画面 の 左上 が (0,0) で 右 方 向 が X 方 向 、 下 方 向 が Y 方 向 で す 。 
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この サン ブル で は 、① の 部 分 で 変数 winTop、winLeft と も に 値 を 「0] に し て 
いる の で 、 指 定 は (0,.0) と 同じ に な り ま す 。 そ の た め 、 画 面 左 上 に ウィ ンド ウ が 


表示 され ます 。 


X 方 向 
(0.0) 





AoqaniA 識 


DS 


Professiona 





Y 方 向 
moveTo メ ソ ッ ド は 、IE に 実装 され て いる JScript に は 存在 し ませ ん 。 し か し 


な せ ぜ 動 作 す る か と いう と 、IE 版 DHTML に moveTo メ ソ ッ ド が 実装 され て いる た 
めで す 。 
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4-10 





ら 環 い 細 
ウィ ンド ウ を 移動 させ る 


変数 名 = setTimeout( "命令 ", 呼び 出し 間隔 ) 


豆 ド * 細 















ウィ ンド ウ の 位置 や サイ ズ が 指定 で きる な ら 、IE4 以 上 や NN4 で は ウィ ンド ウ 
を 動か せる の で は 、 と 考え る 人 が いる か も し れ ま せん 。 そ こ で ウィ ンド ウ な 動か 
し て みた の が この サン プル で す 。 


2 あ ) PE つ 貞 に 導 





ここ に 移動 し た 後 横 に 移動 し 





ウィ ンド ウ を 動か ウィ ンド ウ を 動か 
は ず 


X 方 向 へ 移動 X 方 司 へ 移動 


画 画 
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<htm1> 

<tit1e>move window</tit1e> 
<script 1anguage="]avascript"> 

く !-- 

var displayMidth = screen.avai1Midth: 
var disp1ayHeight = screen.avai1Height: 
var winMidth = 200j 

var winHeight = 300j 

var positionX = 0 

var step = 10: 

var timerTD: 


var ua = navigator.userAgent 


function nitMindow( ){ 
if( ua.indexOf("MSIE",o) ){ 
window.resizeTo(winMidth, winHeight) 


} 


この 位置 で 止ま る 


movewindow ら .html 


else if( ua.indexOf( "moz1i11a/4",0) | | ua.indexOf 


回 ("Netscape6",o) ){ 
window.outerMidth = winMidth: 
window.outerHeight = winHeight: 
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function moveMindow( ){ 


if(positionX < disp1ayMidth-winwidth ) { 一 ーー 一 (3③) 


PositionX = positionX + step: 


window.moveTo( positionX,0): 
timerTD = setTimeout( "moveMindow( ) " ,10) 


} 
elset 


clearTimeout(timerTD) ーーーーーーーーーーーーーーーーーーーーーーー-④ 


} 
//=-> 
</ script> 


<body on1oad="initMindow( )" bgco1or="#f 和 ff8dc"> 
<h3> ウ ィ ン ド ウ を 動か す </h3> 
<hr /> 
X 方 向 へ 移動 
<form> 
<input type="button" value=" 移 動 " onc1ick="moveMindow()" /> 
</form> 
</body> 
</htm1> 


な 


この サン プル で は 、Web ペ ー ジ が ロー ド さ れる と 、 ウ ィ ン ド ウ の サイ ズ を 変 
更 し ます 。 ま た 、 ペ ー ジ 上 に 配置 され た [移動 ]」 ボ タン を クリ ッ ク す る と 、 ウ ィ ン 
ドウ が 画面 の 上 端 を 横 方 向 に 移動 し ます 。 こ れ ら の 機能 を 実装 する た め に 、 ウ ィ 
ンド ウサ イズ を 指定 する た め の initWindow 関 数 と 、 ウ ィ ン ド ウ を 動か す た め 
の moveWindow 関 数 と いう 2 つの 関数 を 作成 し て いま す 。 

initwindow 関 数 は 、<body> タ グ に 記述 され た onload イ ベン ト ハ ンド ラ に 
よっ て Web ペ ー ジ ロー ド 時 に 呼び 出さ れ 、 ウ ィ ン ド ウサ イズ を 縦 300 ピ クセ ル 、 
横 200 ビ ピクセル に 変更 し ます (の 箇所 )。 こ の よう な ウィ ンド ウ を リサ イズ する 
処理 に つい て は 、P.146 で 詳細 を 解説 し て あり ます の で 、 そ ちら を 参照 し て くだ 
さい 。 

また 、moveWindow 関 数 は [移動 ] ボ タン を クリ ッ ク し た と き に 発生 する 
onclick イ ベン ト ハ ンド ラ を 用 いて 呼び 出さ れ ま す (⑧ の 箇所 )。 
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ウィ ンド ウ を 動か す に は 、 一 定時 間 こ ご と に ウィ ンド ウ の 位置 を 指定 し 直す と い 
う 手 法 を 用 いま す 。 処理 の フロ ー は 以下 の よう に な り ま す 。 


最初 の 呼び 出し 


positionX=0 
step=1 






positionX が displayWidth-winWidth を | 超え て いる 
超え て な いか チェ ッ ク す る 


moveWindow 関 数 の 
び 出 し を 止め る 







超え て いな い 


positionX に step を 足す 







moveTo メ ソ ッ ド で ウィ ンド ウ を 
移動 させ る 





一 定時 間 後に 再度 moveWindow 
関数 を 呼び 


ウィ ンド ウ の 位置 の 指定 は 、P.149 で 解説 し た と お り ウ ィ ン ド ウ の 左上 端 の 座 
標 で す 。 ウィンドウ を 最初 に 表示 する の は 画面 の 左上 な の で 、 位 置 は (0.0) と な 
り ま す 。 こ こ か ら X 座 標 を 格納 し て いる 変数 positionX を 変化 させ て いく こと に 
より 、 ウ ィ ン ド ウ が 動き ます 。 変数 positionX は 、 画 面 の 左上 の 0 から ウィ ンド 
ウ が 右上 に いく まで 変化 し ます 。 こ の と き 変 数 positionX を どこ まで 動か すか チ 
ェ ッ ク し な く て は な り ま せん 。 そ れ を 実装 し て いる の が ③ の 部 分 で す 。 最 大 値 と 
し て は 、 変 数 displayWidth に 格納 され て いる スク リー ン の 横幅 か ら 動か し て い 
る ウィ ンド ウ の 幅 winWidth( こ の サン プル で は 200 ピ クセ ル ) を 引い た も の に 
な り ま す 。 ス クリ ー ン の 横幅 を 調べ る た め に 、 サ ンプ ブル で は availWidth ブ プロパ 
ティ を 使用 し て いま す (TIPS 参 照 )。 

チェ ッ ク し て 変数 positionX が 最大 値 (displayWidth 一 winWidth) を 超え 
て いる 場合 は 、clearTimeout メ ソ ッ ド を 使っ て 再度 moveWindow 関 数 を 呼 
び 出 す の を 止め る こと に より 、 ウ ィ ン ド ウ の 移動 が 止ま り ま す (④ の 箇所 )。 な お 、 
clearTimeout メ ソ ッ ド の 引数 と し て 与え て いる 変数 timerlD は 、 後 述 する 
setTimeout で 設定 され て いる タイ マー を 識別 する た め の 変 数 で す 。 

変数 positionX が 最大 値 を 超え て いな い 場 合 は 、 現 在 の ウィ ンド ウ の 位置 を 表 
す 変 数 positionX に 、 移 動 距 離 を 表す 変数 step を 足し ます 。 こ れ に より 新しい 
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ウィ ンド ウ の 位置 を 作る こと が で きた の で 、moveTo メ ソ ッ ド を 用 いて 実際 に ウ 
ィ ン ド ウ を 移動 させ ます 。 


ウィ ンド ウサ イズ 
positionX (200) 





avai1width 


最後 に この 動作 を 何 回 も 繰り 返す た め に 、setTimeout メ ソ ッ ド で 再度 
moveWindow 関 数 を 呼び 出し ます 。 こ の と き 、 こ こ で 設定 し た タイ マー を 解 
除 で きる よう に 、setTimeout メ ソ ッ ド か ら の 戻り 値 を 変数 timerlD に 格納 し ま 
す 。 こ の 変数 が タイ マー を 識別 する た め の 変 数 と な り ま す 。setTimeout メ ソ ッ 
ド の 書式 は 、 以 下 の よ うに な り ま す 。 


変数 名 = setTimeout( "命令 ", 呼び 出し 間隔 ) 


今回 の スク リプ ト で は 、moveWindow 関 数 を 10 ミ リ 秒 ご と に 呼び 出し て い 
ます 。 こ れ で ウィ ンド ウ が 移動 する と いう スク リプ ト を 実現 する こと が で きま 
す 。 


T 1 P S 


画面 の 解像度 を 知る に は いく つか の プロ パテ ィ が あり ます 。 こ の サン プル で は 
availHeight プ ロバ パテ ィ 、availWidth プ ロ パ ティ を 用 いて いま す 。 し か し 、 こ 
れ 以 外 に height プ ロ パ ティ 、width プ ロバ パテ ィ が あり ます 。 こ れ ら の 関係 は 次 
ペー ジ の 図 の よう に な り ま す 。 

availHeight プ ロ パ ティ 、availWidth プ ロバ ティ は メニ ュー バー や タス ク バ 
ー を 除い た 画面 の 大 き さ を 返し ます 。 


155 


^ooniA 較 





avai1Midth 


avai]1Height 





JavaScript で 文字 列 を 出力 する と き に 、 改 行 や タブ は どう や っ て 表現 す 
れ ば よい の で し ょ うか ? その と き に は 以下 の コー ド を 用 いま す 。 こ の 本 も 
サン プル で も アラ ー ト 内 に 表示 する 文字 列 な ど で 「\n] な ど を 用 いて いま す 。 
Unicode に よる 指定 は IE4 以 降 と NN4.06 以 降 で 用 いる こと が で きま す 。 





\b \u0008 バッ クス ペー ス <BS> 
\t \u0009 タブ <HT> 
\n \u000A ライ ン フ ィ ー ル ド <LF> 
\f \u000C フォ ー ム フィ ー ル ド <FF> 
\r \u000D 復帰 <CR> 
\" \u0022 ダウ ルク オー デー ショ シ / ゃ 
提 \u0027 シン グル クォーテーション 6 
\\ \u005C 円 (バッ クス ラッ シュ ) 上 
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4 語 To 関 … 休 To 関 に 


親 ウ ィ ン ド ウ の コン トロ ー ル 





window.opener.close( ) 





JavaScript を 使用 し て 、 新 た に ウィ ンド ウ を 開く こと が で きま す 。 開い た ウィ 
ンド ウ に 対し て 、 さ ま ざ ま な 操作 を 行う こと も 可能 で す 。 そ れ で は 、 そ の 新しく 
開い た ウィ ンド ウ か ら 元 の ウィ ンド ウ ( 親 ウィ ンド ウ ) を コン トロ ー ル する こと は 
で きる の で し ょ うか 。 こ こ で は 、 開 いた 先 か ら 開 いた 側 の ウィ ンド ウ を コン トロ 
ー ル する スク リプ ブ ト を 解説 し ます 。 


当 window control 2 - Microsoft Imternet Explorer 同 回 EE 人 cci 敵 加 | 国 | に | 
ファ イル (E) 編集 (E) 表示 お 気 に 和 9⑱ ツー- ル MD / ア リッ クタ 講 





新しい ウィ ンド ウ か ら 親 
親 ウ ィ ン ド ウ の コン トロ ー ル の ウィ ンド ウ を 控 作 





New Window Clpse Wndow 





ーー 級 sk : 
ここ を クリ ッ ク ここ を クリ ッ ク ここ を クリ ッ ク 
する と 別 ウ イン する と 別 ウイ ン する と 
ドウ が 開く ドウ が 閉じ る ル 


当 至 の 手 .net - Microsoft nternet Explorer | 当 window con.. 司 | 口 区 | 


り 編集 (E 示 ) お 気 に 和 AD(⑯) ツー ル ①D / ア リタ 
ファ イル (FE) 編集 表示 お気 に 入 D ツー ル ①D [ コ 新しい ウィ ンド ウ か ら 親 
の ウィ ンド ウ を 操作 








人 イン ター ネッ ト 


指定 され た ペー ジ 
へ ジャ ンプ する 


15/ 








window Control - 区 | 
新しい ウィ ンド ウ か ら 親 の 
ウィ ンド ウ を 操作 


Netscape_co.jp - Netscape 6 


Window さ 閉じ る 


cc = 邊 。 。 同 


| Netscape.cojjD 





ここ を クリ ッ ク す る と 「 ホ ー 
ムペ ー ジ 」] へ ジャ ンプ する が 、 


NN で し か 動作 し な い 

人 IE windowcontrol2.html 
<htm1> 

<tit1e>window contro] 2</t ュ it1e> 

<Sscript ]anguage="]avascript"> 

く !-- 

Var win1: 

Var win1: 

function openWin( ){ 

win1=window.open('contro1win.htm1' , 'newwin' 

回 "too1bar=no , 1ocation=no , status=no ,menubar=no, 
回 scro11bars=no,width=180, he1ght=250' ) 

} 


function c1oseMin( ){ 
if(win1 .c1osed == fa]se){ 
win1.c1ose( ) 


} 
elset 


alert(" す で に ウィ ンド ウ は 閉じ られ て いま す "): 


+ 
7/--> 


</ sc エ ipt> 
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<body bgco1or="#FFF8dc"> 

<h3> 親 ウィ ンド ウ の コン トロ ー ル </h3> 

<hr /> 

<form> 

<1nput type="button" value="New Mindow" onc1ick="openMin()" /> 

<input type="button" value="C1ose Mindow" onc1ick="c1oseMin( )" 
回 /> 

</form> 

</body> 

</htm1> 


controlwin.html 





<htm1> 
<tit1e>Mindow Contro1</t ュ 1t1e> 
<script 1anguage="]avascript"> 
<! == 
function goNekonote( ){ 

作 隊 HCEP25H1 
} 


function goHome( ){ 
window.opener.home( ) 


function c1osewin( ){ 
if(opener.c1osed == fa1se){ 


window.opener.c1ose( ) : 


} 
window.c1ose( ) 
} 
が 0 せみ 
</ scr1pt> 
<body> 
新しい ウィ ンド ウ か ら 親 の ウィ ンド ウ を 操作 
<hr /> 
<form> 
<input type="button" value=" 猫 の 手 へ " 
回 onc1ick="goNekonote()" /><br /><br /> 
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得 
ミ 
= 
に 
O 
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<input type="button" value=" ホ ー ム ペー ジ へ " 
回 onc1ick="goHome( )" /><br /><br /> 


<input type="button" value="Nindow を 閉じ る " 
回 onc1ick="c1oseMin()" /> 
</form> 
</body> 
</htm1> 


新た な ウィ ンド ウ を 開い た り 閉じ た りす る windowcontrol2.html は 、「4-7 
ボタ ンク リッ ク で ウィ ンド ウ を 開閉 する 」 で 紹介 し た wincontrol.html と 同じ で 
す 。 た だ 、 こ の スク リブ ト で は 新た に 開く ウィ ンド ウ に controlwin.html と い 
う フ ァイル を 読み 込ん で いま す 。 

スク リプ ト に よっ て 開か れる 新しい ウィ ンド ウ (controlwin.html) に は 、 3 つ 
の フォ ー ム ボタ ン ガ が 配置 され て お り 、1 つ 目 は 新た な リン ク へ 、2 つ 目 は Web ブ 
ラウ ザ で 指定 し た ホー ムペ ー ジ に 、 そ し て 3 つ 目 の ボタ ン は すべ て の ウィ ンド ウ 
を 閉じ る よう に な っ て いま す 。 た だ し 、2 つ 目 の ホ ー ム ペー ジ に 戻る ボタ ン は 
NN4、NN6 で な いと 使え ませ ん 。 

新しく 開か れ た ウィ ンド ウ の ボタ ン は 、 ど れ も ク リッ ク す る と 関数 を 呼び 出す 
よう に 設定 され て いま す 。 一 番 上 の ボタ ン を クリ ッ ク す る と 、① の 部 分 で 
goNekonote 関 数 が 呼び 出さ れ ま す 。 こ の 関数 は 、 現 在 の ウィ ンド ウ を 開い た 、 
元 の ウィ ンド ウ の URL を 変更 し ます 。 記述 は 以下 の と お り で す 。 


window.opener.1ocation.hre 和 f = "URL" 


上 記 の 記述 で は 、 現 在 の ウィ ンド ウ を 表す window オ ブ ジ ェクト 、 次 の 
opener プ ロ パ ティ は 新しい ウィ ンド ウ を 開い た 、 元 の ウィ ンド ウ ( 親 ウィ ンド 
ウ ) を 示し ます 。 さ ら に 、 親 ウィ ンド ウ の location オ ブ ジ ェクト の href プ ロ パ テ 
ィ に 、 新 た な Web ペ ー ジ の URL( こ の サン ブル 中 で は 「http://www.neko-no- 
te.net]) を 代入 し ます 。 こ の 結果 、 親 ウィ ンド ウ に 新しい Web ペ ー ジ が 開か れ 
る の で す 。 

次 に 2 つ 目 の ボタ ン で す が 、 こ れ は Web ブ ラウ ザ に 設定 され た デフ ォ ル トペ ー 
ジ に 移動 する も の で す 。 デ フォ ルト ペー ジ へ の 移動 に は home メ ソ ッ ド を 用 いま 
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す 。 こ の メソ ッ ド が 動作 する の は NN4 以 降 で す (② の 箇所 )。 

最後 に 3 つ 目 の ボタ ン で す が 、 こ れ は ウィ ンド ウオ ブ ジ ェクト 全体 を 閉じ て し 
まう と いう も の で す 。 最初 に 、 開 いた 親 ウ ィ ン ド ウ を 閉じ て いま す 。 以 下 の よ う 
な 記述 に な っ て いま す 。 


AoqniA 


また 親 ウ ィ ン ド ウ だ け で な く 、 現 在 の ウィ ンド ウ も 閉じ ます (3③)。 


これ を 行わ な いと 、 新 し い ウ ィ ン ド ウ の み が 表 示さ れ た まま に な り ま す 。 また 、 
親 ウ ィ ン ド ウ だ け を 自分 で 閉じ て し まっ た と き は 、3 つ の ボタ ン を クリ ッ ク し た 
と し て も 、 す で に 開い た 元 の ウィ ンド ウ は 閉じ て し まっ て いる の で スク リブ プ ト エ 
ラー が 起こ り ま す 。 

な お 、 エ ラー は closed プ ロバ ティ を 用 いて 事前 に 親 ウ ィ ン ド ウ が 閉じ て いる か 
どう か を 確認 する こと に より 、 避 ける こと が で きま す 。 


T 1 P S 


ウィ ンド ウ を 開く と き に は 必ず 閉じ る た め の 方法 を 表示 する よう に し まし ょ 
う 。 さま ざま な アン ケー ト に よる と 、Web ペ ー ジ が 勝手 に 開く の は あま り 好 印 
象 を 持た れ な いよ う で す 。 よ く や た ら と ウィ ンド ウ を 何 枚 も 開く サイ ト が あり ま 
す が 、 間 違い な く 印 象 が よく あり ませ ん 。 最初 か ら ユ ー ザ ー が どの よう に サイ ト 
内 を 動く の か を 考え て 、Web ペー ジ の 設計 を する 必要 が あり ます 。 

どう し よう も な く て ウィ ンド ウ を 開く 場合 に は 、 最 小 の 面積 で 開き さ 、 ち ゃ ん と 
閉じ る た め の ボ タン な り イ メー ジ を 用 意 し て お く の が よい で し ょ う 。 


AoqaniA 較 





COLUMN 


JavaScript リ ソー ス 


JavaSoript を 制作 する に あたっ て 必要 と な る 情報 は 、 以 下 の サ イト に あ 
り ま す 。 


@ECMA Script (ECMA-268) 
URL 了 mhttp://www.ecma.ch/ecma1/stand/ecma-262.htm 


@Microsoft Windows Script Technology 
URL http://www.microsoft.com/]apan/devel1oper/scripting/ (日 本 語 ) 
URL 了 m http://mgdn.microsoft.com/scripting/ (英語 ) 


@Netscape DevEdge Online - JavaScript Developer Central 
URL 了 http://deve1oper.netscape.com/tech/]avascript/ 


@Netscape DevEdge Online - W3C DOM Developer Central 
URL 防 http://deve1oper.netscape.com/tech/dom/ 


[Netscape JavaScript 1.5 
URL 際 。 http://deve1oper.netgcape.com/tech/]avascript/ 


人 @Netscape JavaScript 1.3 
URL http://devel1oper.netscape.com/docg/manuals/]g/c1ient/]sgu1de/ 


@W3C Document Object Model (DOM) Level 1 Specification 
URL 了 mhtEp://www.w3.org/TR/REC-DOM-Leve1 -1/ 


免 W3C Document Object Model (DOM) Level 2 Core Specification 
URL 了 a http://www.w3.org/TR/DOM-Leve]1-2-Core/ 
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DIALOG 











5-1 導い 間 痢 ド 細 


ポタ ンク リッ ク で アラ ー ト を 表示 する 


Web ペ ー ジ の 警告 な ど に 用 いら れる 、 ア ラー ト を 表示 する スク リプ ト で す 。 
ボタ ン を クリ ッ ク す る こと に より アラ ー ト を 表示 し ます 。 





ここ を クリ ッ ク す る と アラ 
ー ト ボッ クス が 表示 され る 





T Alert on Click - Netscape 6 同 回 四 
① ん け ⑬ 





ここ を クリ ッ ク す る と アラ 
ー ト ボッ クス が 表示 され る 
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| 寺 8 博 選 記 alert.html 


<htm1> 
<t ュ it]e>Alert on C11ick</+ ュ t1e> 
<Script 1anguage="]avasCr1pt"> 
く !-- 
function showMsg( ){ 
alert( "He11o JavaScript!"): 
} 
//--> 
</ script> 
<body bgco1or="#fff8dc"> 
<h3> ア ラー ト を 表示 する </h3> 
<hr /> 
ボタ ン を クリ ッ ク す る と アラ ー ト が 表示 され ます <br /> 


<form> 


<input type="button" value="Please C1ick!" 
回 onc1ick="showMsg()" /> 


</ 和 form> 
</body> 
</htm1> 


Web ペ ー ジ 上 に 配置 され た フォ ー ム ボタ ン を クリ ッ ク す る こと に より 、 ア ラ 
ー ト を 表示 し ます 。 アラ ー ト は に GRK__ ボタ ン の み が 用 意 さ れ て いる 小さ な 
ウィ ンド ウ で す 。 

まず 、Web ペ ー ジ 上 に は 、 フ ォ ー ム ボタ ン を 配置 し ます (① の 箇所 )。 フ ォ ー 
ム ボ タン に は 、 ボ タン 上 に 表示 され る 文字 列 と し て 「Please Click!」 を value 属 
性 に より 設定 し ます 。 こ こま で は 通常 の フォ ー ム と 同じ 記述 で す 。 こ の 後 、 ア ラ 
ー ト を 表示 させ る 部 分 を 作成 し ます 。 上 記 の スク リプ ト で は アラ ー ト を 表示 する 
部 分 を showMsg 関 数 (② の 箇所 ) と し て 実装 し て いま す 。 そ の た め 、 フ ォ ー ム ボ 
タン で は クリ ッ ク さ れ た と き に 、 こ の 関数 を 呼び 出す よう に し ます 。 ク リッ ク さ 
れ た と き の イ ベン トバ ハン ドラ は onclick で す 。showMsg 関 数 の 呼び 出し は 以下 
の よう に な り ま す 。 
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sonyiaq 較 


この よう に 記述 する こと で 、 フ ォ ー ム ボタ ン を クリ ッ ク す る と onclick イ ベン 
ト ハ ンド ラ で 指定 され た 関数 が 呼び 出さ れ ま す 。 
アラ ー ト を 表示 させ る に は 、 以 下 の よ うな メソ ッ ド を 用 いま す 。 


alert( "表示 する メッ セー ジ ") 


その た め 、showMsg 関 数 内 で は 、 上 記 の alert メ ソ ッ ド を 用 いて いま す 。 

な お 、 サ ンプ ル の スク リブ ト で は 、 関 数 を 呼び 出す 形 に し て あり ます が 、 
<input> タ グ の onclick イ ベン ト ハ ンド ラ に 、 直 接 アラ ー ト の 呼び 出し を 記述 す 
る こと も で きま す 。 


この 記述 は 表示 する メッ セー ジ が あま り 長 く な い 場 合 に は 、 ス クリ プ ト も 見 に 
くく な ら ず 有効 で す 。 


中 I P S 


アラ ー ト は 、 メ ッ セ ー ジ を 伝え る 手段 と し て は 非常 に 有効 で す 。 し か し アラ ー 
ト は 、 そ の アラ ー ト を 消す まで 生成 し た ウィ ンド ウ を 操作 で き な く し て し まい ま 
す 。 こ れ は Web ペ ー ジ を 訪問 し た ユー ザー に と っ て は 迷惑 な 場合 も あり ます 。 
特に 、Web ペ ー ジ 読み 込み 時 に 必ず 表示 され る よう な アラ ー ト は 基本 的 に は 避 
ける べき で し ょ う 。 ア ラー ト は フォ ー ム の 入力 内 容 に エラ ー が あっ た と き や 、 操 
作 を 確認 する と き な ど に 使い まし ょ う 。 





衝 ら 環 い 細 ら 員 い 章 
指定 時 間 後 に アラ ー ト を 表示 する 


指定 し た 時 間 が 経過 する と アク ショ ン を 起こ す ス クリ プ ト で す 。 ち ょ うど タイ 
マー を セッ ト す る よう な 感じ で す 。Web ペ ー ジ を 読み 込ん だ 数 秒 後に 突然 メッ 
セー ジ を 表示 させ た り 、 指 定 し た 時 間 が 経過 し た と き に 新た な Web ペ ー ジ を 開 
いた りす る こと が で きま す 。 ア ニメーション や スラ イド 効果 も 、 タ イマ ー を 応用 
する こと に より 実装 で きま す 。 










本 ES7 貸 全 


E 32. settimeout 一 Microsoft Internet Explorer 周回 四 
アイ ル (E) 編集 CE) 表示 (W) お 気 に 入 D⑱) ツー ル ① ヘル プ (⑬ 


指定 時 間 後 に アラ ー ト を 表示 する 


指定 時 間 後に アラ ー ト が 表示 され ます 。 


和 較 (に が うこ ト 肝 


69 アポ RN2 


5 秒 た つと 自動 的 に アラ ー ト ボッ 
クス が 表示 され る 








才 
トー/ 
ち 
ビ 
に ) 
@ 


に 二 、( 提 q 較 


し 補語 邊 電電 剖 |] alertsettimeout.html 


<htm1> 
<tit1e>alert sett1meout</ ュ 1e> 
<Script 1anguage="]avascript"> 
く !-- 
function alertTimer( ){ 
alert( "He11o ]avaScript!"): 
} 
7/ - -> 
</ scr1pt> 
<body on1oad="setTimeout( 'a1ertTimer( ) ', 5000)『 ーー ーーーーーーーL』 
回 、 bgco1or="#fff8dc"> 
<h3> 指 定時 間 後に アラ ー ト を 表示 する </h3> 


<hr /> 
指定 時 間 後に アラ ー ト が 表示 され ます 。<br /> 
</body> 
</htm1> 


この スク リプ ト で は 、Web ペ ー ジ を ロー ド し て か ら 5 秒 後に アラ ー ト が 表示 さ 
れ ま す 。 

Web ペ ー ジ 全体 が 読み 込ま れ た と き に 関数 や メソ ッ ド を 実行 する に は 、 
<body> タ グ の onload イ ベン ト ハ ンド ラ を 用 いま す 。 こ こ で は onload イ ベン 
ト ハ ンド ラ に より 、 ア ラー ト を 呼び 出す よう に 記述 し て いま す 。① の 部 分 で 、 
onload イ ベン トバ ハン ドラ に は 以下 の よう な 記述 が 行わ れ て いま す 。 


この 記述 で 用 いら れ て いる setTimeout メ ソ ッ ド は 、 一 定時 間 後 に 命令 を 実行 
する メソ ッ ド で す 。 書式 は 以下 の よう に な り ま す 。 


setTimeout( "実行 する 命令 ′, 時 間 ) 
括弧 内 の 最初 に は 、 実行 する 関数 や メソ ッ ド を 指定 し ます 。 サ ンプ ル で は 、 
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「Hello JavaScript!] と いう メッ セー ジ を 表示 する た め の alertTimer 関 数 を 呼 
び 出 す よ うに 記述 し て いま す (⑧ の 箇所 )。 続け て カン マ (,) で 区 切っ て 、 命 令 を 
実行 する まで の 時 間 を 指定 し ます 。 こ こ で 気 を 付け る の は 、 時 間 の 単位 が 
171000 秒 だ と いう こと で す 。 ここ で は 「5000」 と いう 数 値 が 指定 され て いる の で 、 
5 秒 後 に alertTimer 関 数 が 呼び 出さ れ ま す 。 


T I P -】 


一 定時 間 後 に 何ら か の アク ショ ン を 起こ す と いう スク リプ ト や 記述 は 、 よ く 
Web ペ ー ジ を リロ ー ド する 際 に 用 いら れ ま す 。 Web ペ ー ジ を 引っ 越し た 場合 や 、 
期間 限定 で 何ら か の メッ セー ジ を 見 せ た い と いっ た 場合 で す 。 上 記 の スク リプ ト 
で は 一定 時 間 後に アラ ー ト を 表示 させ て いま す が 、 実際 に は location プ ロバ パテ 
ィ 、 ま た は replace プ ロ パ ティ を 用 いて Web ペ ー ジ の URL を 変更 する こと が 多 
いで し ょ う 。 実際 に 記述 する と 以下 の よう か な 関数 に な り ま す 。 





な お 、HTML の <meta> タ グ を 用 いて も 、Web ペ ー ジ を 一 定時 間 後 に 移動 さ 
せる こと は で きま す 。 で すか ら JavaScript を 用 いる 代わ り に 、 以 下 の 記述 に し て 
も 一 定時 間 後 に Web ペ ー ジ を 変更 する こと が で きま す 。 





* 時 間 は 「 秒 」 で 指定 する 


HTML と JavaScript の 使い 分 け は 、 単 純 に WWeb ペ ー ジ を 移動 させ た い だ け な 
ら ば HTML で 、 移 動 の 前 に 何ら か の 処理 を 行い た いな ら ば JavaScript を 用 いれ 
ば よい で し ょ う 。 
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ey 





ll 還 環 い 了 
ダイ アロ グ ボ ックス を 表示 する 


変数 = confirm( "表示 する テキ スト ")} 


確認 用 の ダイ アロ グ ボ ックス を 出し て 、 ユ ー ザ ー に 確認 を 求め る スク リブ ト で 
す 。 入 力 さ れ た デー タ の 送信 や 設定 の 変更 と いっ た 、 ユ ー ザ ー の 確認 を と っ て か 
ら 次 の 作業 を 行い た い 場 合 に 使用 し まし ょ う 。 






鹿 confirm onClick - Microsoft Internet Explorer 同 回 四 


ファ イル (F) 編集 E) 表示 ) お 気に入り (⑯ ツー ル ① ヘルプ 
@・ の 較 還 の の 丈 
ダイ アロ グ を 表示 する 


[確認 一 ここ を クリ ッ ク 


Microsoft mternet Explorer 了 | 
、 ジ CdoLoe す か 3 





Microsoft Internet Explorer 尼 d| 韻 icrosoft Internet Explorer 了 区 | 





多 不明 な 質問 に 答え ちゃ ぶ だ よ ! 欠 あな た の 判断 は 正しい で す 。 
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gOST 全 VDT 世 confirmonclick.html 


<htm1> 

<tit1e>confirm onc1ick</ て ュ ト 1e> 
<Script 1anguage="〕avaScript"> 
く !-- 

function showMsg( ){ 


res = confirm(" こ れ で よろ し いで すか ? ") , ーーーーーーー-②) 


1f (res == true) 
a1ert( "不明 な 質問 に 答え ちゃ ダメ だ よ ! "): 
else 


al1ert(" あ な た の 判断 は 正しい で す 。『"): 
り 
7/--> 
</ Script> 
<body bgco1or="#fff8dc"> 
<h3> ダ イア ログ を 表示 する </h3> 
<hr /> 
<form> 


<input type="button" value=" 確 認 " 人 /> 
</form> ① 


</body> 
</htm1> 


し 壮 明 . 瑞 処 


上 記 の スク リプ ト で は 、「 確 認 ] と 書か れ た フォ ー ム ボタ ン を クリ ッ ク す る と 、 

認 を 求め る ダイ アロ グ ボ ックス が 表示 され ます 。 こ れ に 対し て [6K__ 
か [svk ] の どちら か を 選ん で クリ ッ ク す る と 、 選 ん だ 答え に よっ て アラ ー 
ト が 表示 され ます 。 

フォ ー ム の ボタ ン を クリ ッ ク す る と 、onclick イ ベン ト ハ ンド ラ に より 指定 さ 
れ た showMsg 関 数 が 呼び 出さ れ ま す 。 こ の 呼び 出し 部 分 は 、 以 下 の よ うに 記述 
され て いま す (① の 箇所 )。 


ボタ ンク リッ ク で showMsg 関 数 が 呼び 出さ れる と 、 ま ず confirm メ ソ ッ ド 
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sohori 


に より 確認 の ダイ アロ グ ボ ックス が 表示 され ます (⑧ の 箇所 )。confirm メ ソ ッ ド 
は 以下 の よう な 書式 で す 。 


変数 = confirm( "表示 する テキ スト ") 


「=」 の 左側 の 変数 に は 、 ダ イア ログ ボッ クス で ユー ザー に 確認 を と っ た 答え の 
値 が 代入 され ます 。 値 は 、「OK」 が クリ ッ ク さ れ た 場合 は 「true]、「 キ ャ ン セ ル 」 
が クリ ッ ク さ れ た 場合 は 「false」 が 代入 され ます 。 そ の 答え に より 、 ス クリ プ ト 
の 処理 を 分 岐 す る こと が 可能 で す 。 

confirm メ ソ ッ ド の 括弧 内 に は 、 ダ イア ログ ボッ クス に 表示 する メッ セー ジ を 
記述 し て お きま す 。 こ の サン ブル で は 「 こ れ で よろ し いで すか ?」 と 確認 し て いま 
す 。 

質問 に 対し て 答え る と 、③ の 部 分 の if 文 が 実行 され ます 。 に "OK_ ] ボ タン 
を クリ ッ ク し た 場合 に は 変数 「res]」 に true が 代入 され て いま す の で 、「if (res == 
true)」 以 下 の 部 分 が 実行 され ます 。 そ の 結果 「 不 明 な 質問 に 答え ちゃ ダメ だ よ ! 」 
と いう アラ ー ト の 表示 が 実行 され ます 。 逆 に [ swyE セ ル ] ボ タン を 選ん だ 場合 に 
は 、「 あ な た の 判断 は 正しい で す 。」 と いう アラ ー ト が 表示 され ます 。 


T 1 P ト 】 


ダイ アロ グ ボ ックス は ユー ザー に 対し て 、「OK」 か 「 キ ャ ン セ ル 」 か を 確認 する 
も の で す 。 そ の た め ダ イア ログ ボッ クス は 意思 を 確認 する の に 用 いる と よい で し 
よう 。 た と えば 、 使 用 条件 や 契約 条件 に 同意 する か どう か の 確認 や 、 購 買 の 意思 
確認 な ど に 用 いる と わか りや すい で し ょ う 。 

また 、 表 示す る 文字 列 は 当然 な が ら 「OK」、「 キ ャ ン セ ル 」 で 回 答 で きる も の に 
する 必要 が あり ます 。 


の 


5-4 喘い 喘 船 い 敵 


ブロ ソ プ ト で ユー ザー に 入力 を 求め 、 それ を ペー ジ に 反映 する 





JavaScript を 使用 する と 、 ブ プロ ンプ ト ( 文 字 入 力 用 の ダイ アロ グ ボ ックス ) を 表 
示し て ユー ザー に 文字 列 や 数 字 を 入力 し て も ら う こと が 可能 で す 。 そ し て 、 そ こ 
で 得 た 入力 結果 を スク リプ ト に 反映 させ る こと も で きま す 。 た と えば 、 誕 生日 を 
入力 し て も ら っ て 星座 を 割り 出し た り 、 ユ ー ザ ー 名 を 入力 し て も ら っ た り し た も 
の を 、Web ペ ー ジ 上 に 反映 させ る こと が で きま す 。 


自動 的 に プ ブロ ンプ ト が 表示 され る 
の で 、 名 前 を 入力 し て [OK] を 
み UW 少 





入力 され た 名 前 が アラ ー ト 
ボッ クス に 表示 され る 














屋 prompt - Netscape 6 








ブロ ンプ ト 
(② ユー ザー 名 を 入力 し て くだ さい 。 


プロ ンプ ト の 形状 は Web ブ ラウ ザ 
に よっ て 異な る 





人 prompt1.html 


<htm1> 
<tit1e>prompt</t ュ 1e> 
<Script 1anguage=" JavaScript"> 
く !-- 
Tunction we1come( ){ 
Var reSi 
res=prompt(" ユ ー ザ ー 名 を 入力 し て くだ さい 。"," こ こ に 入力 "): 
alert(" よ うこ そ !wn" + res + "さん "): 
} 
7/--> 
</ script> 
<body on1oad="we1come( )" bgco1or="#fff8dc"> 一 (1) 
テキ スト 入力 ダイ アロ グ ボ ックス 
<hr /> 
</body> 
</htm1> 


し 99 上 | 層 妥 -】 


上 記 の スク リプ ト で は Web ペ ー ジ を 読み 込ん だ と き に プロ ンプ ト を 表示 し ま 
す 。 そ こ に 名 前 を 入力 し て に "GK "を クリ ッ ク す る と 入力 し た 名 前 が アラ ー 
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ト ボ ックス に 表示 され ます 。 
Web ペ ー ジ が 読み 込ま れ た と き に スク リプ ト を 起動 する た め に は 、<body> 
タグ の onload イ ベン ト ハ ンド ラ を 使用 し ます (① の 箇所 )。 


onload イ ベン ト ハ ンド ラ は Web ペ ー ジ の 読み 込み が 終わ っ た と き に wel 
come 関 数 を 呼び 出し ます (② の 箇所 )。 

welcome 関 数 で は 、 ま ず プ ロン プ ト を 表示 し ます 。 プ ロン プ ト の 書式 は 以下 
の よう に な り ま す 。 


変数 = prompt( "表示 する テキ スト ", "初期 値 " ) 


最初 の ダブ ルク ォ ー テ ーション 内 の 文字 列 は 、 プ ロン プ ト に 表示 され る メッ セ 
ー ジ で す 。 次 の ダブ ルク オォ ー テ ーション 内 に は 、 最 初 に サン プル と し て 表示 させ 
て お く 文字 列 や 数 字 を 指定 し て お きま す 。 ユ ー ザ ー に 正しい 形式 で 入力 し て も ら 
える よう に 、 わ か りや すい 例 を 入力 し て お く と よい で し ょ う 。 メ ッ セ ー ジ や 初期 
値 を 指定 し な く て も 、 プ ロン ブ ト は 実行 で きま す 。 

ユー ザー に 入力 し て も ら っ た 値 は 、 変数 に 代入 され ます 。 文字 列 で も 数 字 で も 、 
どちら で も 代入 する こと が で きま す 。 こ こ で は 変数 res に 値 が 代入 され ます 。 

最後 に ユー ザー の 入力 し た 値 を 以下 の 記述 に より 表示 し ます 。 


具体 的 に は 、 ア ラー ト に 表示 する メッ セー ジ の 一 部 に 変数 res の 値 が 使用 され 
て いま す 。「+」 は 数 値 の 加算 に 使用 され る 演算 子 で す が 、 文 字 列 の 結合 に も 使用 
で きま す 。 ま すず 「 よ うこ そ ! 」 と いう 文字 列 と 改行 (\n) に 、 変 数 res に 代入 され た 
値 が 結合 され 、 そ の 文字 列 に 、 さ ら に 「 さ ん 」 を 付け 加え た 文字 列 が アラ ー ト に 表 
示さ れ ま す 。 な お 、 こ の スク リプ ト で は 、 入 力 さ れ た 内 容 の 確認 を 行っ て いな い 
の で 、 何 も 入力 され な いと 、" null "が 変数 res に 格納 され て し まう た め 、「 よ うこ 
そ null さ ん 」 と 表示 され て し まい ます 。 
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っ 開 い 開 細い 靖 


ブロ ソ ブ ト で ユー ザー に 入力 を 求め 、 フ ォ ー ム に 反映 する 


document.form オ ブ ジ ェクト 名 .e1ement オ ブ ジ ェクト 名 .value= 値 











フォ ー ム を 使っ て いく つも の 項目 を 入力 し て も ら う 場 合 、 重 要 な 質問 を 見 落と 
し て し まう 場合 が あり ます 。 また どう し て も 入力 し て ほし い 項 目 が ある 場合 に は 、 
目立た せ た い 場 合 が あり ます 。 こ の スク リプ ト で は 、 フ ォ ー ム 入力 の Web ペ ー 
ジ が ロー ド さ れる と 同時 に プロ ンプ ト が 表示 され 、 指示 に し た が っ て いく だ け で 、 
自動 的 に フォ ー ム へ の 入力 が 完了 し ます 。 


が 記 凌 到 . 肌 」 


午 prompt form - Microsoft Internet Explorer 


プア イル) 編集 GE) 表示 お 気 に 入 D⑯ ツー ル ① ん ルプ ⑬ 
の 回 国人 の の 実 pmp 鍛 な の 
自動 和信 力 フォ ー ム 



















名 前 : 宮坂 多 
住所 : 








人 ME2M Explorer ユー ザー ブロ ンプ ト 


スト ブロ ンプ ト 
住所 を 入力 L て くだ さい 。 


( 














ここ に 入力 され た 文字 列 が 、 自 動 的 に 
フォ ー ム に 入力 され る 


AN prompt2.html 


<htm1> 

<tit1e>prompt form</ ュ 1e> 
<script 1anguage="]avascript"> 
く !-- 

function inputPrompt( ){ 
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SECTION 5-5 $ プロ ンプ ト で ユー ザー に 入力 を 求め 、 フ ォ ー ム に 反映 する 


Va TeS= ぅ 


for(jj)t 
res=prompt( "名 前 を 入力 し て くだ さい 。"," 7) 
if(res=="" | | res==nu11){ 
alert( "名 前 が 入力 され て いま せん "): 
} 
else{ 
document.myForm . nput1 .value=reS: ーーーーーーーーーーーーー(③) 
break: 
} 
} 
ESEC は 
for(jj)t 
res=prompt( "住所 を 入力 し て くだ さい 。"," 7) 
if(res=="" | | res==nu11){ 
a1ert( "住所 が 入力 され て いま せん "): 
} 
else{ 
document.myForm.1nput2 .value= エ eS 
breakj 
} 
} 
} 
7/ --> 
</ scr1pt> 


<body on1oad=" inputPrompt( ) " bgco1or="#fff8dc"> 
<h3> 自 動 入力 フォ ー ム </h3> 
<hr /> 


<form name="myForm"> 








回 名 前 :<input type="text" size="20" name="input1" /> 

回 <br /> 住 所 : <input type="text" size="40" name="1nput2" 。 
回 <br /><br /><input type="button" value=" や り 直し " 

回 onc1ick="inputPrompt()" /> 

</form> ーーー② 
</body> 

</htm1> 


17/ 





sonvia 較 


状 暫 し 線 英 う 】 


この サン プル で は 、2 つ の テキ スト ボッ クス と 「 や り 直 し 」 と 書か れ た ボタ ン の 
ある フォ ー ム を 配置 し て いま す 。name 属 性 に より 、 フ ォ ー ム に は 「myForm」、 
テキ スト ボッ クス に は 、 そ れ ぞ れ 「input1」、「input2」 と いう 名 前 が 付け られ て 
お り (① の 箇所 )、 こ れ ら は それ ぞ れ form オ ブ ジ ェクト 、elements オ ブ ジ ェ ク 
ト と し て 扱わ れ ま す 。 

Web ペ ー ジ が 読み 込ま れる と 、⑧ の 部 分 の <body> タ グ の onload イ ベン ト 
ハン ドラ に よっ て inputPrompt 関 数 が 呼び 出さ れ ま す 。 

inputPrompt 関 数 で は 、 プ ロン プ ト を 表示 し 、 そ こ に 入力 され た 値 を フォ ー 
ム に 代入 する 処理 を 行い ます 。 こ の 関数 内 で は さら に 、 プ ロン プ ト に 何ら か の 値 
が 入ら な い 場 合 に は ユー ザー に 対し て アラ ー ト を 表示 し 、 再 度 入力 を 促す 処理 を 
行っ て いま す 。 こ の 処理 に は 無限 ルー プ を 使い 、 あ まり 複雑 に な ら な いよ うに し 
て いま す 。 


OR っ コー ロコ ニー コス コメ コー ニコ ビバ コーロ タニ ここ ココ ョ ミュ ョ ここ ここ コー ドニ ーー 
res=prompt(" 名 前 を 入力 し て くだ さい 。"," "): 
if(res=="" ll res==null){ ーーーーーーーーー 変数 res の 確認 
alert(" 名 前 が 入力 され て いま せん "): 
} 無限 ルー プ 
elset 


document.myForm.input1.value=res: で フォ ー ム へ の 代入 


H 
H 
redk ペ ーーーーー ーー ルー プ pg 帝 8 
』 


な 


inputPrompt 関 数 で は 、 ま す 無 限 ル ー プ に 入り 、 そ の 中 で プロ ンプ ト の 表示 
を 行っ て いま す 。 


上 記 の 記述 に より 「 名 前 を 入力 し て くだ さい 」 と いう プロ ンプ ト が 表示 され 、 ユ 
ー ザ ー が 入力 し た 文字 列 は 変数 「res] に 代入 され ます 。[ sr セル ] ボ タン が クリ 
ッ ク さ れ た 場合 は 、 変 数 res に null が 代入 され ます 。 次 に 変数 res に 入力 され た 値 
を 調べ ます 。 
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上 記 の if 文 で は 、 変 数 res に 空白 、 ま た は null が 代入 され て いな いか どう か を 調 
べ て いま す 。 

変数 res の 値 が 空白 、 ま た は null の 場合 に は アラ ー ト を 表示 し て i 文 を 抜け ま 
す 。 こ の 場合 は 無限 ルー ブ の 中 な の で 再度 for ル ー プ の 先頭 に 処理 が 戻り 、 プ ロ 
ンプ ト が 表示 され ます 。 

また 、 変 数 res が 空白 、 ま た は null 以 外 の 場合 に は 、③ の 記述 の か よう に フォ ー 
ム に 値 が 代入 され ます 。 


sonviq 較 


この 部 分 で 、 変 数 res に 代入 され て いる 文字 列 が 、myForm と いう フォ ー ム 上 
に ある input1 と いう 名 前 の テキ スト ボッ クス に 入力 され ます 。 テ キス ト ボ ッ ク 
ス に 入力 され る 値 は value プ ロ パ ティ で 設定 で きま す 。 住所 を 入力 し て も ら う 部 
分 に つい て も 、 同 様 の 処理 を 繰り 返し ます 。 

フォ ー ム の 一 番 下 に ある ボタ ン を クリ ッ ク す る と 、 こ の フォ ー ム の 
onclick イ ベン ト ハ ンド ラ に より inputPrompt 関 数 が 呼び 出さ れ 、 再 び 最 初 か 
ら 処理 が や り 直 され ます 。 

ここ で は 、2 つ の テキ スト ボッ クス に 入力 し て も ら う だ け な の で 、 あ まり 役 立 
つと は 感じ られ な いか も し れ ま せん 。 し か し 、 多 数 の テキ スト ボッ クス に 入力 し 
て も ら う 場合 な ど に 、1 つ 1 つの 回 答 を 確か め な が ら 対 話 形式 で アン ケー ト を 進め 
て いく な ど 、 工 夫 次 第 で 面白 い VVeb ペ ー ジ が 作成 で きる で し ょ う 。 
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sonyiq 識 





Sg Navigator 内 蔵 の デバ ッ ガ 


NN の 場所 ツー ル バ ー(location ツ ー ル バー) に 「javascript:」 と 入力 する 
と 、 内 蔵 の デバ ッ ガ (JavaScript コ ン ソ ー ル ) を 起動 する こと が で きま す 。 
この と き 、「javascript] の キー ワー ド の 後ろ に 付く の は セミ コロ ン 「:」 で は 
な く コ ロン 「:」 で す 。 

起動 し た ウィ ンド ウ は 一 番 上 に 入力 の フォ ー ム が 、 そ の 下 に 結果 の 表示 領 
域 が ありま す 。 こ の 入力 フォ ー ム に JavaScript の 命令 を 記述 し て 「 評 価 ] を 
クリ ッ ク す る と 、 下 の 表示 領域 に 、 命 令 を 処理 し た 結果 が 表示 され ます 。 な 
お 、 エ ラー が ある 場合 に は この 表示 領域 に エラ ー の 内 容 が 表示 され ます 。 


ょ アイ ル (P) 編集 CE) 表示 ) 2① ヘル プ (⑪ 





2 2320 KCD 表 2D へ GO 
k。/4 


| alert("hello JavaScript> 
+ 





な お 、Web ペ ー ジ を 閲覧 中 に エラ ー が 発生 し た と き に 、location ツ ー ル 
バー に 「javascript:] と 入力 し デバ ッ ガ を 立ち 上 げ る と 、 そ の と き の エ ラー 
の 内 容 が 表示 され ます 。 
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PAGE 





61 包 画 


履歴 を 用 いて ペー ジ を 戻る ・ 進 む 
history.back( ) 
history .forward( ) : 





少し 前 に 表示 し た Web ペ ー ジ を も う 一 度 開き た いと き 、Web ブ ラウ ザ の ツー 
ル バ ー に ある 「 戻 る ] ボ タン で Web ペ ー ジ を 戻る こと は よく あり ます 。Web ペ ー 
ジ 作成 者 が 何ら か の 意図 を 持っ て 、Web ペ ー ジ の 履歴 に ある 1 つ 前 の ペー ジ に 戻 
し た いと き に 、 次 の よう な スク リプ ト を 使用 し ます 。 た と えば 、Web ペ ー ジ を 
読み 込ん だ と き に パス ワー ド 入 力 画 面 を 表示 させ 、 パ スワ ー ド が 間違っ て いた ら 
リン ク す る 前 の Web ペ ー ジ に 戻す と いっ た よう に 使用 され ます 。 ま た 、 逆 に 
Web ペ ー ジ を 1 つ 進 め た い 場 合 も ちり ます 。 な お 最初 に この Web ペ ー ジ を 開い 
た 場合 は 、 履 歴 が な い の で 戻っ た り 、 進 ん だ りす る こと は で きま せん 。 


全都 も 上 AT 


ョ 5 y a 較 


等 history back - Microsoft Internet Explorer 
アイル) 編集 (C 表示 びり) お 気 に 入 DO(⑩ ツー ル ① ん へ 員 ⑪ 


アド ルス (0D) | 皿 ] YYTequiraWWorks-2W3 音 スカ リプ ト *historyCntlhtml 





こち ら を クリ ッ ク す る と 、 履 歴 の 


1 つ 先 に 進む 





ここ を クリ ッ ク す る と .… 
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等 Yahoo! JAPAN - MMicrosoft Imternet Explorer 
プア イル) 編集 (EC) 表示 ) お 気に入り Q⑯ ウー ル ① ヘル プ ⑪ 


@ 京 ・@・ 較 回 の の es 到 5moo 伴 テ 7 の 


了 ド L2⑥) | 罰 http//wwwyahoocojp/ 


S 


ジャ ネッ ト 先 行 予約 


= クス プレ ス - 推薦 が 間 単に 、 再審 査 も 無料 。 
: オ ョ 施行 遠 ー ス - スポ ー ツ - ファ イナ ンス 天気 - TV 
コミ ュー ティ ー: 掲示 板 - チャ ッ ト - メッ セン ホー ムペ ー ジ 作成 - ドメイン 取 彰 - ゲー ム 音楽 - 
議 | 
パー ソナ ル :Ny Yahool 














履歴 の 1 つ 前 の ペー ジ に 戻る 


(OM 寿 -2EE histrycnt 1.html 


<htm1> 
<tit1e>history back</t ュ て 1e> 
<script 1anguage="]avascript"> 


く !-- 

function pageBack( ){ Q 
history .back( ) 

} 

function pageForward( ){ の 
history .forward( ) 

+} 

// ニ = 

</ script> 


<body bgco1or="#fff8dc"> 
<h3> ペ ー ジ を 進む 、 戻 る </h3> 
<hr /> 
<form> 


<input type="button" value=" 戻 る " onc1ick="pageBack()" /> 


KN 
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ME 」 計 3、( 。 議 


<1input type="button" value=" 進 む " onc1ick="pageForward()" /> 
</form> 


<hr /> 
</body> 
</htm1> 


この サン ブル 上 に は 2 つの フォ ー ム ボタ ン が 配置 され て いま す 。 フ ォ ー ム ボタ 
ン で [ 長 >] ボ タン を クリ ッ ク す る と <input> タ グ に 指定 され た onclick イ ベン ト 
ハン ドラ に より pageBack 関 数 が 、 ボタ ン を クリ ッ ク す る と 同様 に 
pageForward 関 数 が 呼び 出さ れ ま す 。 

① の 部 分 の pageBack 関 数 で は 、 以 下 の メ ソ ッ ド が 実行 され て いま す 。 


history オ ブ ジ ェクト の back メ ソ ッ ド は 、 現在 表 示さ れ て いる Web ペ ー ジ を 、 
履歴 に 登録 され て いる 1 つ 前 の Web ペ ー ジ に 戻す と いう も の で す 。 こ れ に より 、 
現在 表示 され て いる Web ペ ー ジ を 見 る 1 つ 前 の Web ペ ー ジ に 戻り ます 。 

また 、⑧ の 部 分 の pageForward 関 数 で は 、 以 下 の メ ソ ッ ド が 実行 され て いま 


| 


history オ ブ ジ ェクト の forward メ ソ ッ ド は 、 履 歴 の 1 つ 先 の Web ペ ー ジ に 
進ま せま す 。 

この サン プル で は フォ ー ム ボタ ン を 使用 し て いま し た が 、 ア ンカ ー 内 に 実装 す 
る こと も で きま す 。 


href 属 性 内 で history オ ブ ジ ェクト の back メソ ッ ド を 実行 し て いま す 。 ア ン 
カー を クリ ッ ク し て JavaScript を 実行 させ る に は 、<a> タ グ の href 属 性 に 命令 
を 指定 する 必要 が あり ます 。 そ の 際 、 実 行 する 命令 の 前 に 「javascript:」 と 書く 
こと を 忘れ な いで くだ さい 。 
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6-2 m 大 多い 呈 





JavaScript で は 、 た だ 単に 履歴 の 1 つ 前 や 1 つ 後 ろ の Web ペ ー ジ に 移動 する だ 
け で な く 、 い くつ 進ま せる か も 指定 する こと が 可能 で す 。 と は いえ 、 指 定 し た 数 
以上 の 履歴 が な けれ ば 何 も 起 こり ませ ん の で 、history.back メ ソ ッ ド history. 
forward メ ソ ッ ド と 組み 合わ せ て スク リプ ト を 書く と いい で し ょ う 。 


D | S PE A_'Y 


当 history go - Microsoft Internet Explorer 


: フイ ル ⑥ 編集 ) 表示 ⑰ お 気 に 和 D⑱) ツー ル ①D AM プ 


1 ⑳ 束 ・ 





185 


講 Yahoo! JAPAN - Microsoft Internet Explorer 
ファ イル (FE) 編集 CC) 表示 ぺ ) お 気に入り ⑯ ツー ル ① ヘル プ ⑬ 


5s ・ ②・ と る る の 時 実 sw20 等 の @ 人 の 
7RL2O) | 細 he/7wwwya 





ビジ 2 ルレ - 拓 
ショ ッ ピン グ : オ ニク ショ ンー 放 行 幸 : ニ ュー スー スポ ーッ 














な う つう と 
コミ ュ ニ ティ ー 昌代 チャ ッ ト - ャ ー - ホー ムペ ー ジ 作成 - ドメイン 取得 - 
剖 パー ソナ ル : 和 を レー 銚 - カレ ンダ ー - xz 生 帳 - 挨拶 捧 - フォ ト ア ル バ ム - プリ ー フ ケー ス - 
グル メ - 路線 地図 占い - 穫 賞 - 学習 求人 下 動 産 - 自 動車 - コノ ピュ ー タ - 投 枝 きっず 
で モバ イル 
ち 
@ 2 つ 前 の 履歴 に さか の ぼっ て 
ペー ジ を 表示 する 
m 
生 の に 衣 も 幸 ・ … 記 historycnt2.html 


<htm1> 

<tit1e>history go</ て 11e> 
<Script 1anguage="]avascript"> 
9 さ な 


var htstoryLength = htstory.1ength: 一 3③ 


function goHistory(pointer ){ 


history・go(ponter) : 一 ーーーーーーーーーーーーーーーーーーーーーー〈 リ 


} 
7// - -> 
</ script> 


<body bgco1or="#fff8dc"> 

<h3> 指 定 し た ペー ジ に 移動 し ます </h3> 
<hr /> 

<scrtpt 1anguage="]aVascript"> 


< く !-- 
document.write(" ヒ スト リー は " + historyLength + 
回 " 個 あ り ま す 。<br />"): 
7/--> 


【 ノ 
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</ Script> 
<form> 
<input type="button" value="2 つ 戻る " 
回 onc1ick="goHistory(-2)"/> 
<input type="button" value="2 つ 進む " 
回 onc1ick="goHistory(2)" /> 
</form> 
</body> 
</htm1> 


し 二 - 和 和則 病 


この サン ブル で は 、2 つ の フォ ー ム ボタ ン が 配置 され て いま す 。[ 25 戻る ] ボタ 
ン を クリ ッ ク す る と 、2 つ 前 の Web ペ ー ジ に 戻り 、[ 323 仙 5 ] ボ タン を クリ ッ ク す 
る と 、2 つ 先 の Web ペ ー ジ に 進み ます 。 こ れ ら の ボタ ン を クリ ッ ク し た 際 に 呼び 
出さ れる の は goHistory 関 数 で す 。 

この goHistory 関 数 は 、history オ ブ ジ ェクト の go メソ ッ ド を 実行 し て いま 
す (① の 箇所 )。go メ ソ ッ ド の 書式 は 以下 の よう に な り ま す 。 


history go( 移 動 す る ペー ジ 数 ) 


移動 する ペー ジ 数 に マイ ナス の 数 値 を 与え た 場合 に は 履歴 を 戻り 、 プ ラス の 数 
値 を 与え た 場合 に は 履歴 を 進み ます 。 

ここ で goHistory 関 数 を 見 て みる と 、 引 数 で 渡さ れ た 値 pointer を 移動 する ペ 
ー ジ 数 の 部 分 に 設定 し て いま す 。 そ の た め 、goHistory 関 数 を 呼び 出し て いる 部 
分 の 数 値 が 、go メ ソ ッ ド に 渡さ れる こと に な り ま す 。 ボタ ン に 設定 さ 
れ て いる 部 分 で は 「-2] を 、 ボタ ン に 設定 され て いる 部 分 で は 「2」 を 設定 
し て いる た め 、 こ れ ら の 数 値 が go メソ ッ ド に 渡さ れる こと に な る の で 、 履 歴 を 
戻っ た り 、 進 ん だ りす る こと に な り ま す (② の 箇所 )。 履歴 が な か っ た 場合 は 、 何 
も 起こ ら な い だ け で エラ ー に は な り ま せん 。 

また ボタ ン の 上 に は 履歴 の 総数 が 表示 され ます が 、 こ れ に は history オ ブ ジ ェ 
クト の length プ ロバ ティ を 使用 し て いま す 。 具体 的 に は ③ の 部 分 で length プ ロ 
バ パティ の 値 を 変数 historyLength に 代入 し 、 そ れ を document.write メ ソ ッ ド 
で 表示 させ て いま す (④ の 簡 所 )。 
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6-3 邊 軸 楓 喘 


指定 し た ペー ジ に 移動 する 
window オ ブ ジ ェクト 名 .1ocation.rep1ace( "URL"): 


通常 Web ペ ー ジ を 移動 する と 、Web ブ ラウ ザ の ツー ル バ ー に ある 「 戻 る ] ボ タ 
ン で 前 の Web ペ ー ジ に 戻る こと が 可能 で す 。 と ころ が 、 こ の サン プル ペー ジ に 
ある ボタ ン を クリ ッ ク し て Web ペ ー ジ を 移動 する と 、 ボ タン の 配置 し て あっ た 
Web ペ ー ジ に は 「 戻 る ] ボ タン で 戻っ て くる こと が で き な く な り ま す 。 










強 location replace - Microsoft Imternet Explorer 


| ファ イル (E) 編集 (E) 表示 () お 気に入り (⑱⑯ ツー ル ① ヘル プ ⑪ 


③⑨j・@⑳・ 回 贈る の 昧 実 sw @o < 


ペー ジ の 移動 


[rgxt pags ーー ここ を クリ ッ ク す る と .… 





戻る ボタ ン は 使え な い シル 


当 SOFTBANK BOOKS - Microsoft Internet Explorer 
: ファ イル CE) 編集 (E) 表示 ) お 気 に 入 D(⑳ ウー ル ① へ ヘルプ 


に JJ ホーム  《 伯 等 録 情報 (し 買い物 か 





指定 し た ベー ジ に 入 
れ 替 わる 
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MT 本 3 replace.html 


<htm1> 

<tit1e>1ocation repl1ace</ て it1e> 

<Scr1pt 1anguage="]avascript"> 

く !-- 
function repl1acePage( ){ 

window.1ocation.rep1ace( "http://books.softbank.co.]Pp")} 

1 

7//--> 

</ script> 

<body bgco1or="#fff8dc"> 

<h3> ペ ー ジ の 移動 </3h> 

<hr /> 

<form> 
<input type="button" value="next page"' onc1ick= 

回 "replacePage()" /> 

</form> 

</body> 

</htm1> 


た 上 も と 全 


Web ペ ー ジ に は 、「next page」 と 書か れ た フォ ー ム ボタ ン が 配置 され て いま 
す 。 ク リッ ク す る と 、<input> タ グ の onclick イ ベン ト ハ ンド ラ に より replace 
Page 関 数 が 呼び 出さ れ ま す 。 

replacePage 関 数 で 実行 され る の は 、 以 下 の 命令 で す 。 


これ は 、window オ ブ ジ ェクト に 対し 、location オ ブ ジ ェクト の replace メ 
ソ ッ ド を 使用 し て いま す 。 

replace メ ソ ッ ド は 、 現 在 の Web ペ ー ジ の URL を 、 括 弧 内 に 指定 し た URL に 
置き 換え る メソ ッ ド で す 。 そ の 結果 、Web ペ ー ジ は 現在 の Web ペ ー ジ か ら 
replace で 指定 し た Web ペ ー ジ へ と 変更 され ます が 、 現 在 の Web ペ ー ジ の URL 
は 履歴 に 残り ませ ん 。 で すか ら 、Web ブ ラウ ザ の ツー ル バ ー の 「 戻 る ] ボ タン で 
戻 ろ うう と し て も 、 戻 れ な く な っ て し まう の で す 。 


189 





に 
で 
トコ 
の 
m 





Web ブ ラウ ザ で 指定 し た ホー ム に 戻る 





JavaScript1.2 で は 、 ユ ー ザ ー の 開い て いる Web ペ ー ジ を ホー ム に 戻す こと 
が で きま す 。 ホ ー ム と は 、 ブ ラウ ザ を 起動 し た と き に 最初 に 表示 され る Web ペ 
ー ジ の こと で す 。 も っ と も よく 開く Web ペ ー ジ や 、 サ ー チ エン ジン な ど を 設 
し て いる 人 が 多い で し ょ う 。 

サイ ト の 最後 の Web ペ ー ジ か ら 、 そ の ユー ザー の ホー ム に 移動 させ る と いっ 
た 使い 方 も で きま す 。 


且 電 W- も 人 、 サ 


還 go home - Netscape 6 | に! 
ょ ファ イル (FE) 編集 (E) 表示 ( ざ ) 検索 6) ジャ ンプ Q⑬) ブッ マー が B) 2①D ヘル プ (⑪ 


人 ⑲ 1 宇目 


軸 Netscape-co-jp - Netscape 6 
ょ ファ イル (F) 編集 (E) 表示 (V) 検索 ⑤) ジャ ンプ (G) ブッ クマ ー ワ (B) ぬ 入 の (① ヘル プ (H 


So 図 


2001.10.29 6:03 AM JST 
北部 同盟 支配 の 村 を 米 軍 語 孝 、 死者 は 2 入 か 
6 
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人 :CR 人 RBS を backhome.html 


<htm1> 
<tit1e>go home</ て 1]e> 
<body bgco1or="#fff8dc"> 
<h3> ホ ー ム に 戻る </h3> 
<hr /> 
<form> 
<input type="button" value="Home に 戻る " onc1ick="home()" /> 
</ 和 form> 
</body> 
</htm1> 


ED 人 4 に る 


この スク リプ ト で は 、 _ Home に 戻る | ボタン を クリ ッ ク す る こと に より 、 ホ ー 
ム に 戻り ます 。 こ の home と いう メソ ッ ド は 、 


window.home( ) 
と いう 形 で 扱い ます 。window オ ブ ジ ェクト は 省略 可能 で す 。 こ こ で は 、① の 


よう に 記述 し て 、 フ ォ ー ム ボタ ン が クリ ッ ク さ れる と onClick イ ベン ト ハ ンド ラ 
に よっ て home メ ソ ッ ド が 実行 され る よう に し て いま す 。 
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ュ 5 v a 識 


6-5 四 議 罰 邊 議 
フレ ー ム の 内 容 を 変更 する 


parent . 和 frame オ ブ ジ ェクト 名 .1ocation.href = "URL": 











フレ ー ム で ウィ ンド ウ を 分 割 し た 場合 、 そ れ ぞ れ の フレ ー ム ペー ジ を 変更 する 
作業 は か な り の 頻度 で 行わ れ ま す 。 こ の サン プル で は 、 別 フレ ー ム に 表示 され る 
ペー ジ を JavaScript で 変更 し て いま す 。 フ レー ムペ ー ジ の 変更 に スク リプ ト を 使 
用 する と 、 タ イマ ー と 組み 合わ せ て 一 定時 間 後に 自動 的 に 他 の フレ ー ム の ペー ジ 
を 切り 替え た り 、 複 数 の フレ ー ム ペー ジ を 1 回 の 操作 で 変更 させ る こと な ども 可 
能 で す 。 


机 馬 - 電 本 都 . 泊 。 「main」 フレ ー ム 
(frame.html) 


プイ ル (E) 編集 EC) 表示 ざ ) お 気 に 入 D⑳ ツー ル ① へ ヘルプ 
@ 束 の 6 較 加 の の 実 swco 符 間 の の 全 - 
フレ ー ム の 内 容 を 変更 する 





左右 の ペー ジ が 同時 に 変更 され ます 
[Granes ] ーー ここ を クリ ッ ク す る と 





Left Pane Right Pane 





「left」 フレ ー ム 「right」 フレ ー ム 
(left.html) (right.html) 
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These are my books!l 
現在 和 が た 書籍 は 以下 の 通り で 


SOFTBANK BO 
二 誠 講読 の お 
い 。 









それ ぞ れ の フレ ー ム に 別 
の ペー ジ が 読み 込ま れる 


本 changeFrame.html 


<htm1> 
<frameset rows="30%,* リ "> 
<frame src=" 和 frame .htm1" name="main"> 
<frameset col1s="50%,*"> 
<frame src="1eft.htm1" name="1eft"> 
<frame src="right.htm1" name="right"> 
< く / 和 frameset> 
</frameset> 
</htm1> 
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frame.html 


<htm1> 
<tit1e>frame change</t ュ て]1e> 


< く Scr1pt 1anguage="]avascript"> 

< く !-- 

function changeContents( ){ 
Parent.1eft.1ocation.href="http://books.softbank .co.]p/": 
Parent.right.1ocation . href="http : / /www.neko-no-te .net/books/": 

} 

7/--> 

</script> 


<body bgco1or="#fFff8dc"> 
<h3> フ レー ム の 内 容 を 変更 する </h3> 


<hr /> 
左右 の ペー ジ が 同時 に 変更 され ます 
<form> 


<input type="button" value="Change" 
回 onc1ick= "changeContents()" /> 
</form> 
</body> 
</htm1> 


lefthtml 


<htm1> 

<tit1e>1e 生 t page</tit]1e> 

<body bgco1or="#000080" text="# 和 ffff 和 "> 
<h3>Left Pane</h3> 

</body> 

</htm1> 
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right.html 


<htm1> 

<tit1e>right page</ て ュ t1e> 

<body bgco1or="#8BbO000" text="# 和 ff リッ > 
<h3>Right Pane</h3> 

</body> 

</htm1> 


人 


この サン プル は 、 フ レー ム に よっ て ウィ ンド ウ が 3 つ に 区 切ら れ て いま す 。 上 
に 表示 され て いる フレ ー ム ペー ジ の フォ ー ム ボタ ン を クリ ッ ク す る と 、 下 に ある 
2 つの フレ ー ム ペー ジ が 同時 に 変更 され ます 。 

フレ ー ム を 設定 する changeFrame.html で は 、 上 の フレ ー ム を 「main]、 左 
の フレ ー ム を 「left」、 右 の フレ ー ム を 「right] と いう 名 前 に し て いま す (① の 箇 
所 )。 そ れ ぞ れ の フレ ー ム に 表示 させ る ペー ジ を 設定 する 際 に は 、 この 名 前 を 参照 
し ます 。 

「main」 フ レー ム に ある [chanme ] ボ タン を クリ ッ ク す る と 、 ⑱ の <input> タ グ の 
onclick イ ベン ト ハ ンド ラ に よっ て 、changeContents 関 数 が 呼び 出さ れ ま す 。 

changeContents 関 数 で は 、 左 右 そ れ ぞ れ の フレ ー ム に 表示 させ る Web ペ ー 
ジ を 変更 し ます 。 他 の フレ ー ム の Web ペ ー ジ の 内 容 を 変更 する 場合 に は 以下 の 
よう に な り ま す 。 


parent. 和 frame オ ブ ジ ェクト 名 .1ocation.href = "URL": 


parent は 現在 の フレ ー ム の 親 フ レー ム を 表す プロ パテ ィ で す 。 こ の 例 の よう 
に 「main」 フ レー ム の ペー ジ に 記述 し て ある スク リプ ト か ら 、 同 じ 階 層 に ある 
「left」 フ レー ム や 「right] フ レー ム へ の アク セス は 以下 の よう に な り ま す 。 


これ は ちょ うど MS-DOS の 相対 パス 指定 と 同じ も の だ と 考え れ ば わか りや す 
いで し ょ う 。 た と えば 同じ 階層 に 「main]、「left」、「right] と 3 つの ディ レク ト 
リ が あっ た と し て 、 「main] が カレ ント ディ レク トリ の と き に 、 「left」 や 「right」 
は 次 の よう に 表現 し ます 。 
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ュ 5 v da 較 


この 「..」 に あたる の が parent プ ロ パ ティ で す 。 


また 、 ル ー ト ディ レク トリ を 表す 「\」 に あたる top プ ロバ ティ や 、 カ レン ト デ 
ィ レ クト リ を 表す 「.」 に あたる self プ ロ パ ティ な ども 用 意 さ れ て いま す 。 








実際 の スク リプ ト で は 、 フ レー ム の location オ ブ ジ ェクト の href プ ロバ パテ ィ 
に URL を 与え て いま す 。 


これ に より 、「left」 フ レー ム に 指定 し た URL の Web ペ ー ジ が 読み 込ま れ ま す 。 
右側 の フレ ー ム に も 同様 の 設定 を 行い ます 。 そ の 結果 、 ボ タン を クリ ッ ク し た と 
に 、 左 右 の フレ ー ム ペー ジ か が 順番 に 変更 され る の で す 。 

な お 、 こ の 例 の 場合 、「left」 フ レー ム の 親 フ レー ム は ペー ジ 全 体 で す の で 、 次 
の よう に top プ ロ パ ティ を 使っ て 記述 し て も 、 同 じ 動 作 を し ます 。 


6-6 届い 隔 邊 ト 了 


フレ ー ム の ペー ジ の 画像 を 変更 する 


Parent .frame オ ブ ジ ェクト 名 .document.1image 
オブ ジェ クト 名 .src = "URL" 





フレ ー ム を 効果 的 に 使用 し た 、 使 い 勝手 の よい Web ペ ー ジ を よく 見 か け ま す 。 
ここ で は 、 別 フレ ー ム に 表示 され て いる 画像 を 変更 する 方 法 を 説明 し ます 。 応用 
すれ ば 、 他 の フレ ー ム ペー ジ の さま ざま な オブ ジェ クト を 参照 また は 設定 する こ 


と も 可能 で す 。 






避 ! 
2 「main」 フ レー ム 
」 (frame.html) 





ここ を クリ ッ ク す る と 
「right」 フ レー ム 


(right.html) 





「left」 フレ ー ム 
(left.html) 
image1 image3 
i 2 
2 image4 ーー 


19/ 

















アイ ル ぢ 





転入 () 表示 お 気に入り @ 


に に 衝 ウ ) 


MD へ ルプ 0⑩ 


委 YYTequiraWorks-2Y9 章 スク リト \frame2\changelmage_html - Microsoft Internet Explorer 


思 国人 め の 支 5m9 時 ケア の つう - き * 帳 





フレ ー ム 内 の 画像 を 変更 する 


LChanes | 



















| 軸 ベー が R 示 SI また 


画像 が 入れ 替わる 


<htm1> 

<frameset rows="130,*"> 

<frame src=" 和 frame.htm1" name="main"> 
<frameset co1s="50%,*"> 


<frame src="1eft.htm1" name="1eft"> 


<frame src="right.htm1" name=" ェ ight"> 


く /frameset> 
</frameset> 
</htm1> 


<htm1> 


<t ュ it1e>frame 1mage change</t ュ て 1e> 


<script 1anguage="]avascript"> 


く !-ー 
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Left Pane Right Pane 







changelmage.html 


frame.html 


ーー で = ャ 


用 用 00UUUOI 


function changeImage( ){ 


1 


Mae 


Parent.1eft .document.1mage1.src="images/1mg3.g1T"』 
Parent.1eft.document . 1mage2.Src="1mages/1mg4.g1": 
Parent.right . document . 1mage1 . Src="1mages/1mg1.g1 生 ": 


Parent.right.document.1mage2 . src="images/1mg2.g1 和 ": 


上 
//-=> 
</ Script> 


<body bgco1or="#fff8dc"> 
<h3> フ レー ム 内 の 画像 を 変更 する </h3> 
<hr /> 
<form> 
<1nput type="button" value="Change" 
回 onc1ick= "changeTmage()" /> 


</form> 
</body> 
</htm1> 
left.html 
<htm1> 
<body bgco1or="#fff8dc"> 
<h1>Left Pane</h1> 
<div al1ign="center"><br /> 
<1mg Src="images/1mg1.g1 和 f" name="1mage1" 
回 width="160" height="160" /> <br /> 
<1mg Src="1mages/1mg2.g1f" name="image2" 
回 width="160" height="160" /> </div> 
</body> 
</htm1> 
right.html 
<htm1> 


<body bgco1or="#fFfF8dc"> 
<h1>Right Pane</h1> 


<div a1ign="center"><br /> 
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ュ 5 v da 識 


<img src="1mages/1mg3.g1 和 "name="1mage1" 
回 width="160" height="160" /> <br /> 
<1mg Src="1mages/1mg4.g1f" name="1mage2" 
回 width="160" height="160" /> </div> 
</body> 
</ htm1> 


この サン プル は 、4 つ の ファ イル か ら 構 成 さ れ て いま す 。 フ レー ム を 設定 する 
ファ イル と 、 そ れ ぞ れ の フレ ー ム に 表示 され る 3 つの ペー ジ の ファ イル で す 。 画 
面 上 は 3 つの フレ ー ム に 区 切ら れ て いて 、 上 の フレ ー ム に ある ボタ ン を クリ ッ ク 
する と 、 そ れ ぞ れ の フレ ー ム ペー ジ は 更新 され る こと な く 、 フ レー ムペ ー ジ 内 の 
画像 の み が 変 更 さ れ ま す 。 

フレ ー ム を 設定 する changelmage.html で は 、 上 の フレ ー ム に 「main]」、 左 
下 の フ レー ム に 「left」、 右 下 の フ レー ム に 「right」 と いう 名 前 を 付け て いま す 。 
この 名 前 は 、 そ れ ぞ れ の フレ ー ム を 参照 する 際 に 使用 され ます 。 

「left」 フ レー ム に 読み 込ま れ た Web ペ ー ジ の イメ ー ジ (Image オ ブ ジ ェクト ) 
に は 、 そ れ ぞ れ 「image1」、「image2」 と いう 名 前 が 付け られ て いま す (① の 箇 
所 )。「right] フ レー ム に 読み 込ま れる ファ イル の イメ ー ジ に も 同様 に 「image1」、 
「image2] と いう 名 前 が 付け られ て いま す (⑧ の 箇所 )。 

今回 の サン ブル で 重要 な の は 、「main] フ レー ム に 表示 され る ファ イル で す 。 
フォ ー ム ボタ ン を 配置 し 、 ク リッ ク し た と き に changelmage 関 数 を 呼び 出す よ 
うに onclick イ ベン ト ハ ンド ラ で 指定 し て いま す (③ の 箇所 )。 

④ の 部 分 で 、changelmage 関 数 が 行う 処理 は 、 画 像 を 取り 換え る だ け の 簡単 
な も の で す 。 同じ フレ ー ム 内 の Web ペ ー ジ の 画像 を 変更 する 場合 に は 、 
document オ ブ ジ ェクト 内 に ある 画像 オブ ジェ クト の src プ ロ パ ティ に 画像 の 
URI を 設定 し ます が 、 こ の 例 の よう に 、 他 の フレ ー ム に ある 画像 を 設定 する に は 、 
P.195 で も 紹介 し た parent プ ロ パ ティ を 使用 し ます 。 


parent .frame オ ブ ジ ェクト 名 .document.image オ ブ ジ ェクト 名 . 
回 src = "URL" 


この サン ブル で は 、 次 の よう な 記述 で 指定 し て いま す 。 
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SECTION 6-6 多 フレ ー ム の ペー ジ の 画像 を 変更 する 


parent . 1eFfFt .document . image1 . SrC = "img3.giE" 


left は 左下 の フレ ー ム に 付け た 名 前 で す 。 そ し て 、 そ の フレ ー ム の document 
オブ ジェ クト 内 に ある image1 と いう Image オ ブ ジ ェクト の src プ ロ パ ティ の 値 
を 「img3.gif」 に 変更 し ます 。 そ の 結果 、 左 上 の 画像 が それ まで 右 下 に あっ た 
も の に 変更 され る の で す 。 他 の 画像 に つい て も 同様 に 変更 され ます 。 な お 、 左右 
両方 の フレ ー ム の 画像 オブ ジェ クト に 、 同 じ image1 と いう 名 前 が 設定 され て い 
ます が 、 フ レー ム の 名 前 に よっ て 識別 され る の で 、 別 の フレ ー ム に 同じ 名 前 の オ 
ブ ジ ェクト が あっ て も 正しく 参照 で きま す 。 


コー ド の 字 下 げ 


JavaScript は スク リプ ト 言 語 と は いえ 、 結 構 長い コー ド に な っ て し まう 
こと が あり ます 。 そん な と き に は 少し で も 見 や すく する た め に 工夫 が 必要 で 
す 。 

た と えば 、 以 下 の よ うな コー ド は あま り 見 や すく あり ませ ん 。 





for( 1=0: 1<=7 : 1++ ){ 

document .write("<EFont size=" + 1 + ">he11o</font><br />"): 
=}+1.) 

} 


この よう な コー ド を 見 や すく する に は 字 下 げ を 行い ます 。 


Eor( も =0: ミ <=7 : エ ++ ){( 
document .write("<EFont gize=" + 1 + ">he11o</Eont><br />"): 


= ゴ +1: 


for 文 に より ルー プ 内 で 行わ れる 処理 の 前 に 空白 (タブ ) を 入れ て 、 ル ー プ 
が どこ か ら ど こま で か を わか りや すく し て いま す 。 同様 に if 文 や while 文 な 
ども 字 下 げ を し て 記述 する べき で す 。 1 で 囲ま れ て いる 場合 に は 、 そ の 中 
の 記述 は 外側 より も 字 下 げ を 行う よう に し ます 。 通常 タブ に より 字 下 げ を す 
る の が 、 プ ログ ラミ ング 上 効率 的 で す 。 
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67 っ 古い 遼 。^ 国 ト 間 


ペー ジ の 自動 スク ロー ル 


setTimeout( "命令 " , 間隔 ) 





映画 の スタ ッ フ ロー ル な ど で よ く 見 られ る 、 画 面 が スク ロー ル す る サン ブル で 
す 。 う まく 使う と よい 効果 を 出す こと が で きる で し ょ う 。 


等 scroll - Microsoft Internet Explorer 


: ファ イル (F) 編集 E) 表示 ) お 気 に 入 D⑯ ウール ① ヘル プ ⑬ 


〇 ゃ ・ の 回 国人 の の we 支 5moo の 7 の 


スク ロー ル さ せる 





ペー ジ が 読み 込ま れる の と 同時 に 、 
ル 自動 的 に スク ロー ル が 始ま る 


等 scroll - Microsoft Internet Explorer 


: アイ ル (F) 編集 (EC) 表示 W) お 気に入り 


| @m・ の - 回 回 る の 






ッ ー ル ①。 ルプ 
検索 < 計 ぉ AD 負 






| 負 ページ が 表示 され まし た 9 イン トラ ネッ ト 


どん どん 下 ヘ へ スク ロー ル す る 
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Microsoft Internet Explorer 








指定 し た 分 だ け ス ク EE 
ロー ル し て 止ま る 
で 
ち 
SM の WU 馬 YEnnrE scroll 1 .html 
@ 
<htm1> m 


<tit1e>scro11</tit1e> 


<script ]1anguage="]avascript"> 
く !-- 

var stop_y = 1000j 

var dy = 0j 

var step = 5 


Var Sec = 10 ぉ 


function windowScro11( ){ 
if (dy < stop_y) { 
dy += stepj 
window.scro11(O, dy): 


setTimeout( "windowScro11( )", sec)j 


} 
7 --> 


</ script> 


<body on1oad="windowScro11( ) " bgco1or="#TfT8dc"> 
<h3> ス クロ ー ル させ る </h3> 


<hr /> 
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ュ 5 v a 詳 


<tab1e border="O" height="1000" width="400"> 
<t テ > 
<td bgco1or="#99ffcc" va1ign="top"> 
<div sty1e="font-size: 25pxj ont-family: Times"> 
Ros . It is not the fashion to see the Ladie the Epi1logue : 


( 略 ) 


offer, when T make curt'sie, bid me farewe11 . 
< く /div> 
</td> 
< く /t エ > 
</tab1e> 
</body> 
</htm1> 


を. 生 


この サン プル で は Web ペ ー ジ が ロー ド さ れる と ウィ ンド ウ 内 が スク ロー ル す 
る よう に な っ て いま す 。 スク ロー ル を 実際 に 行う の は 、① の 部 分 の windowScroll 
関数 で す 。 こ の 関数 内 で は window オ ブ ジ ェクト の Sscroll メ ソ ッ ド を 用 いて スク 
ロー ル を 実現 し て いま す 。scroll メ ソ ッ ド は 、 以 下 の よ うな 書式 に な り ま す 。 


window オ ブ ジ ェクト 名 .scro11(X 座 標 , Y 座 標 ) 


Scroll メソ ッ ド で 用 いる X 座 標 、Y 座 標 は 絶対 座標 で す 。 こ の 座標 は Web ペ ー 
ジ の 左上 を (0,0) と し て 右 方 向 を X 方 向 、 下 方 向 を Y 方 向 と し て いる も の で す 。 





講 about:blank - Microsoft Imternet Explorer 





(0.0) 


Y 座 標 
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windowScroll 関 数 で 使用 する 変数 は 、② の 部 分 に 設定 され て いま す 。Web 
ペー ジ は 、 変 数 dy に 設定 され て いる 値 の 位置 に 移動 (スク ロー ル ) し ます 。 こ の 変 
数 dy は 初期 値 が 0 で す が 、 処 理 の 途中 で 変数 step に 設定 され て いる 値 だ け 足 され 
ます 。 し か し 、scroll メ ソ ッ ド を 1 回 だ け 実 行 し て も 、 変 数 step の 値 し か スク ロ 
ー ル し ませ ん 。 そ こ で 用 いる の が 、setTimeout メ ソ ッ ド で す 。 こ の メソ ッ ド は 
一 定時 間 ご と に 命令 を 呼び 出す も の で す 。 setTimeout の 書式 は 以下 の よう に な 
り ま す 。 


setTimeout( "命令 ", 間隔 ) 


この メソ ッ ド の 間隔 の 単位 は ミリ 秒 (1/1000 秒 ) で す 。1000 で 1 秒 と な り ま す 。 
この サン プル で は 変数 sec に 10 を 設定 し て 、10 ミ リ 秒 ご と に windowScroll 関 
数 を 呼び 出し て いま す 。 

さら に この サン プル で は どこ まで スク ロー ル さ せる か を 指定 する た め に 、 変 数 
stop_y を 用 意 し て いま す 。 こ の 変数 stop_y を windowScroll 関 数 の 中 で 最初 に 
比較 する こと に より 、 ス クロ ー ル の 量 を コン トロ ー ル し て いま す 。 変数 dy が 変数 
stop_y を 超え た ら windowScroll 関 数 は 実行 され な く な り ま す 。 


T I P S 


自動 スク ロー ル を Web ブ ラウ ザ 内 で 実際 に 行う と 、 ユ ー ザ ー が コン トロ ー ル 
で き な い た め 使い づら い 場 合 が あり ます 。 そ の た め 、 よ く 用 いる の は フロ ー テ ィ 
ング フレ ー ム 内 で 動作 させ る と いう も の で す 。 フ ロー ティ ング フレ ー ム は Web 
ペー ジ 内 の 任意 の 場所 に フレ ー ム を 作れ る と いう も の で す 。 フ ロー ティ ング フレ 
ー ム は <iframe> タ グ を 用 いて 記述 し ます 。 


今回 の スク ロー ル す る ファ イル を src 属 性 に 指定 する こと に より 、 フ ロー ティ 
ング フレ ー ム 内 で スク ロー ル さ せる こと が で きま す 。 また 、 そ の 他 の 属性 と し て 、 
幅 (width)、 高 さ (height)、 枠 線 の 有無 (frameborder)、 ス クロ ー ル 
(scrolling) な ども 指定 する こと が 可能 で す 。 
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6-8 1 講 導 1 忠 い 隊 


スク ロー ル を コン トロ ー ル する 


window オ ブ ジ ェクト 名 .opener. scro11(X 座 標 , Y 座 標 ) 
タイ マーTD = setTimeout( "命令 ", 間隔 ): 
c1earTimeout( タ イマ ーTD) 





スク ロー ル は 結構 面白 いこ と が で きる の で す が 、 こ の スク ロー ル を ユー ザー が 
コン トロ ー ル で きる よう に し た いも の で す 。 ス クロ ー ル させ る こと も よい の で す 
が 、 ス クロ ー ル を 止め られ な いと 困る と いう 内 容 も あり ます 。 そ ん な 場合 に は 、 
スク ロー ル の コン トロ ー ル 機能 を 付け る と 有効 で す 。 


短 scroll - Microsoft Internet Explorer 






ここ を クリ ッ ク す る と 自動 的 に ス 
クロ ー ル が 始ま る 


ここ を クリ ッ ク す る と 


ウィ ンド ウ が 閉じ る 
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等 scroll - Microsoft Internet Explorer 
お 気に入り ツール ① ヘル プ (⑬ 







scroll control window - Microsof. 全 IM| 


ここ を クリ ッ ク す る と 、 
スク ロー ル が 止ま る 


この ウィン ドウ を 閉じ る | 


導電 幸生 Scroll2.html 


<htm1> 
<tit1e>scro11</ て 1t1e> 


<Script 1anguage="]avascript"> 
く ! -- 
function openMin(winname ){ 


window.open( "scro11Contro1 . htm1" ,winname , "width=360, 


回 height=200 , too1bar=no , 1ocation=no , status=no ,menubar=nO, 
回 scro11bars=no" ) : 

+ 

7/ --> 

</ script> 


<body bgco1or="#FfFF8dc" on1oad="openMin('contor1win' )』"> 
<h3> ス クロ ー ル を コン トロ ー ル する </h3> 
<hr /> 
<tab1e border="O" height="1000" width="400"> 
<t エ > 
<td bgco1or="#99ffcc" val1ign="top"> 
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IIHIIIMM 


<div sty1e="font-size: 25pxj font-fami1y: Times"> 


Ros. It is not the fashion to see the Ladie the Epi1ogue : 


( 略 ) 


offer, when T make curt'sie, bid me farewe11 . 
く /diV> 
</td> 
く /t エ > 
</tabl1e> 
</body> 
</htm1> 


ScrollControl.html 


<htm1> 

<tit1e>scro11] contro] window</t ュ it1e> 
<Script ]anguage="]avascript"> 

く !-- 

var stop_y = 1000j 

var dy = 0 

var step = 5 

Var sec = 10j 

var bstatus = 'true': 


var timerTD: 


function windowScro11(bstatus) { 
if( bstatus=='fa1se'){ 
c1earTimeout(TimerTD) 
況 
else if (dy < stop_y) { 
dy += step: 
window.opener.scro11(0, dy): 


TimerTD = setTimeout( "windowScro11(bstatus ) " , sec): 


} 
//--> 


< く / scr1pt> 


<body bgco1or="#Fff8dc"> 
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ウィ ンド ウ の スク ロー ル を コン トロ ー ル し ます 
<hr /> 
<form> 
<nput type="button" value="Start" onc1ick="windowScro11 
回 ('true')" /><br /> 
<input type="button" value="Stop" onc1ick="windowScro11 


回 ("fa1se')" /> 
<hr /> 
<input type="button" value=" こ の ウィ ンド ウ を 閉じ る " 
回 onc1ick="window.c1ose()" /> 
</ 和 form> 
</body> 
</htm1> 


し 人 隊 二 - 】 


この サン ブル は 2 つの ファ イル で 構成 され て いま す 。1 つ は スク ロー ル さ れる 内 
容 が 記述 し て ある HTML フ ァイル 、 も う 1 つ は スク ロー ル を コン トロ ー ル する 
HTML フ ァイル で す 。 





Scrollg.html scrollcontrol.html 
コン トロ ー ル ウィ ンド ウ を オー プン ーー 二 ウィ ンド ウオ ォ オー プン 
start ) ボ タン クリ ッ ク 
スク ロー ル トト 一 時 windowScroll(true) 呼 び 出し | 
こよ 
に 
ャ 
スク ロー ルス トッ プ トー 量 windowScrll(false) 呼 び 出し | 
R 
寺 
スク ロー ル トー 馬 windowScroll(true) 呼 び 出し | 
( 灯り 返す 
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scrolI2.html の 中 で 、 ロ ー ド 時 に スク ロー ル を コン トロ ー ル する scroll 
Control.html を 開い て いま す 。 そ の た め 、 ス クロ ー ル する scroll2.html が 親 ウ 
ィ ン ド ウ と な り ま す 。 scroll2.html に は 、scrollControl.html を 開く と いう 機 
能 以外 は 記述 され て いま せん 。 scrolIControl.html で は [sat] と の ボタ ン 
を 使っ て スク ロー ル を コン トロ ー ル する こと が で きま す 。 ス クロ ー ル が 終了 する 
まで は スク ロー ル を コン トロ ー ル する こと が で きま す 。 

で は 、 次 に スク ロー ル を コン トロ ー ル する scrollIControl.html の 記述 に つい 
て 解説 し て いき ます 。 こ の Web ペ ー ジ に は 3 つの フォ ー ム ボタ ン が 配置 され て い 
ます 。 こ の うち の [stwt ] ボタ ン と [step] ボタ ン の onclick イ ベン ト ハ ンド ラ に よ 
り windowScroll 関 数 の 呼び 出し を 行い 、scroll2.html の スク ロー ル を コン ト 
ロー ル し て いま す 。 こ の windowScroll 関 数 は P.202 の サン プル で 解説 し た も の 
を 改良 し て いま す 。 こ の 改良 の 中 で 重要 な の は 、 関 数 の 呼び 出し に 引数 を 付け 、 
これ に より スク ロー ル の 状態 を コン トロ ー ル で きる よう に し て いる 部 分 で す 。 引 
数 と し て は 「true」、「false」 の 2 種類 が あり ます 。true の と き に は スク ロー ル 
し 、falses の と き に は スク ロー ル が 止ま る よう に し て いま す 。 


Sa sop 


ボタ ンク リッ ク 変数 sec だ け ウ ェ イ ト 







false 


clearTimeout を セッ ト す る こと | 


windowScroll 関 数 の 内 部 で は 、 上 図 の よう な 動作 を 行い ます 。 ま すず 引数 と し 
て 渡さ れ た 値 を 格納 し た 変数 bstatus が true と false の どちら な の か を 判定 し 、 
true の 場合 で あれ ば 、 変 数 step に 格納 され た 値 を 変数 dy に 足し 合わ せ 、 変 数 dy 
の 位置 まで scroll メ ソ ッ ド を 用 いて スク ロー ル さ せま す (① の 箇所 )。 こ の と き 、 
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どこ を スク ロー ル さ せる か と いう 指定 を 見 る と 、 次 の よう に な っ て いま す 。 


この 記述 の opener と いう の は 、「 こ の ウィ ンド ウ を 開い た ウィ ンド ウ 」 を 表す 
キー ワー ド で す 。 こ れ で 、scrollIControl.html を 開い た scroll2.html を 表す こ 
と が で きま す 。 

その 後に 、setTimeout メ ソ ッ ド を 用 いて 変数 sec に 格納 され て いる 値 の 分 だ 
け 時 間 が 経過 し た ら 、windowScro 関 数 を 呼び 出す よう に し て いま す 。 な お 
setTimeout メ ソ ッ ド で は 、 変 数 TimerlID と いう も の を 設定 し て いま す 。 


タイ マーTD = setTimeout( "命令 ", 間隔 ) 


これ は Web ペ ー ジ 内 で 、setTimeout や setlnterval を 複数 用 いた と き に 区 別 
を 付け る た め の も の で す 。 こ うい っ た 働き を する 変数 を 一 般 的 に は タイ マーID と 
呼ん で いま す 。 

windowScro 関 数 が 呼び 出さ れ た と き の 引 数 が false だ っ た 場合 に は 、 
clearTimeout メ ソ ッ ド が 呼び 出さ れ て いま す (② の 箇所 )。 こ れ は setTimeout 
メソ ッ ド で 設定 され て いる 関数 の 呼び 出し を クリ ア す る も の で す 。 こ こ で は 
setTimeout メ ソ ッ ド で 設定 され て いる タイ マーID を パラ メー タ と し て 取り ま 
す 。 


cl1earTimeout( タ イマ ーTD) 


これ に より 、setTimeout メ ソ ッ ド で 設定 され て いる windowScrol 関 数 の 呼 
び 出 し を クリ ア す る こと に な り ま す 。 
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6-9 廊 い 了 胡 4f 


Web ペ ー ジ 上 の リン ク の 一 覧 を 表示 する 





JavaScript を 使用 する と 、Web ペ ー ジ 上 に どれ だ け の 数 の リン ク が ある か を 
確認 で きま す 。 ま た 、 ど こ へ の リン ク が ある の か を 参照 する こと も 可能 で す 。 


等 links yiewer - Microsoft Internet Explorer 
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SECTION 6-9 多 Web ペ ー ジ 上 の リン ク の 一 覧 を 表示 する 


記 links yjewer - Microsoft Imternet Explorer 


イル (E) 編集 E) 表示 び ) お 気 に 入 DQ ツール ① へ ヘルプ 





リン ク 一 覧 の 表示 


ボタ ン を クリ ッ ク す る と 、 ペー ジ 内 の リン ク の 一 覧 が 表示 され ます 。 


委 Y*Tequirayworks-2\3.. 司 | 区 | 


リン ク の 一 覧 

http ガ ww nekko-no-te ne 

Http ガ yww rmcrosoft comyjapay 
http www msn co.1p/ 


親 ベ ー ジ の リン ク の 一 覧 が 
表示 され る 





に linkcheck.html 


<htm1> 
<tit1e>1inks viewer</ 人 て 1t]e> 


<script 1anguage="]avascript"> 








く !-- 
function showLinks( ){ ② 
var msg = "リン ク の 一 覧 :<br />": 
for(i=0: <document.1inks .1ength: i++){ 
msg = msg + "<a href=" + document.1inks[1] + 
回 "> document.1inks[1] + "</a><br />"j 
} 
var win1 = window.open('','newwin1', 'too1bar=no 
回 1ocation=no , status=no,menubar=no, w1dth=300, 
回 height=300' ) : 
win1 .document .write(msg)j 
win1.document.c1ose( ) ] 9 リ 
} 
//=-> 
< く / Script> 


<body bgco1or="#FfT8dc"> 
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<h3> リ ンク 一 覧 の 表示 </h3> 
<hr /> 
ボタ ン を クリ ッ ク す る と 、 ペ ー ジ 内 の リン ク の 一 覧 が 表示 され ます 。<br /> 
<Torm> 
<input type="button" value=" 表 示 " onc1ick="showLinks()" /> 
</form> 
<hr /> 
<a href="http : / /www .neko-no-te.net/"> リ ンク 1</a><br /> 
<a href="http : //www .microsoft .com/]apan/"> リ ンク 2</a><br /> 
<a href="http : //www.msn.co.]p"> リ ンク 3</a> 
</body> 
</ htm1> 


この サン プル で は 、Web ペ ー ジ 内 に 記述 され た リン ク の 一 覧 を 別 ウ ィ ン ド ウ 
に 表示 する も の で す 。 

フォ ー ム ボタ ン の 下 に 「 リ ンク 1」 か ら 「 リ ンク 3」 ま で の リン ク が 用 意 さ れ て いま 
す 。 そ れ ぞ れ 異 な る URL へ の リン ク で す 。「 表 示 」 と 書か れ た ボタ ン を クリ ッ ク す 
る と 、① の 部 分 の onclick イ ベン ト ハ ンド ラ に よっ て showLinks 関 数 が 呼び 出さ 
れ ま す 。 

showLinks 関 数 で は 、 最 初 に 変数 msg に 「 リ ンク の 一 覧 : \n」 と いう 文字 列 
が 代入 され ます 。「\n」 は 改行 コー ド で す 。 

次 に 、for 文 を 使用 し た ルー プ 処 理 を 行っ て いま す (⑧ の 箇所 )。 ル ー プ の 条件 
は 以下 の よう に な っ て いま す 。 


カウ ンタ 「i」 の 初期 値 は 0 で す 。"document.links.length" は Web ペ ー ジ 内 
の リン ク の 総数 を 返す の で 、 こ の ルー プ は リン ク の 数 だ け 繰り 返し て 処理 が 行わ 
れる こと に な り ま す (for 文 に つい て は P.44 参 照 )。 

Web ペ ー ジ 内 の URL は 、document オ ブ ジ ェクト の links コ レク ショ ン に 格 
納 さ れ て いま す 。 コ レク ショ ン と は オブ ジェ クト の 集まり を 意味 し 、links コ レ 
クシ ョ ン に は 、Web ペ ー ジ 上 の Link オ ブ ジ ェクト が 上 か ら 順 番 に 格納 され て い 
ます 。Link オ ブ ジ ェクト に 格納 され た リン ク へ の アク セス は 添え 字 を 用 いて 行い 
ます 。 書式 は 次 の よう に な り ま す 。 
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document.1inks [添え 字 ] 


添え 字 は 0 か ら 開 始 さ れ ま す 。 そ の た め 、 こ の サン プル に は links コ レク ショ ン 
に 、 以 下 の よ うに リン ク が 格納 され て いま す 。 


全 上 inks[0] http://vww.neko-no-te.neU 
@inks[1] http:/www.microsoft.com/japan/ 
inks[2] http://Www.msn.co.jP/ 


サン プル で は 、 リ ンク へ の アク セス を 行い な が ら 変 数 msg に 文字 列 を 追加 し て 
いき ます 。 

for 文 に よっ て 、3 回 ルー プ 処 理 が 行わ れ 、 変 数 msg の 中 に 表示 し た い リ ンク 
が すべ て 格納 され ます 。 

この 後 、 ス クリ プ ト で は 新しい ウィ ンド ウ を 開く た め の 処 理 を 行い ます (③ の 
箇所 )。 新 し い ウ ィ ン ド ウ を 作成 する に は window オ ブ ジ ェクト の open メ ソ ッ 
ド を 用 いま す 。 ウ ィ ン ド ウ を 開く 部 分 に 関し て は P.123 を 参照 し て くだ さい 。 

④ の 部 分 で は 開か れ た ウィ ンド ウ に 対し て 、 変 数 msg を 記述 し 閉じ ます 。 これ 
に より 、 新 た に 開か れ た ウィ ンド ウ 内 に 、 リ ンク の 一 覧 が 表示 され ます 。 
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7 計 / a 較 





Script Encoder 


JavaScript の 欠点 と し て 、 ユ ー ザ ー が コー ド を 見 る こと が で きる と いう 
点 が あり ます 。 た と えば 、 非常 に 高度 な ロジ ッ ク を JavaScript に より 実装 
し た 場合 で も 、 ユ ー ザ ー か ら 隠 す 手段 が な が いと いう こと に な り ま す 。 こ れ で 
は 、 商 業 利用 を する 場合 に 還っ て し まう こと が あり ます 。 こ れ に 対処 する た 
め に Microsoft 社 は スク リプ ト を エン コー ド で きる 機能 を 提供 し て いま す 。 


ダウ ン ロ ー ド 元 
URL 了 ahttp: //www.mtcrosoft.com/]apan/developer/goripting/ 


上 記 の サイ ト か ら ス クリ プ ト エ ンコ ー ダ ー を 取得 し て くだ さい 。 現在 
(2001 年 11 月 ) の バー ジョ ン は 1.0 と な っ て いま す 。 

スク リプ ト エ ンコ ー ダ ー は 、 コ マン ドラ イン か ら 使 う ツ ー ル で す 。 コ マン 
ド プ ロン プ ト か ら イ ンス トー ル さ れ た フォ ル ダ に 移動 、 ま た は フル バス で プ 
ログ ラム を 起動 し ます 。 

スク リプ ト エ ンコ ー ダ ー の プロ グラ ム の 実行 は 以下 の よう に 入力 し ます 。 


> screnc [/?] [/s] [/f] <source> <destination> 
7? ヘル プ 
/s サイ レン トモ ー ド (ディ スプ レイ に 何 も 表 示さ れ な い ) 
/f 上 書き が 発生 し て も 強制 的 に 置き 換え る 
<source> 変換 元 フ ァイル 名 
<destination> 変換 後 フ ァイル 名 


た と えば 、printChar.html を エン コー ド し て 、printCharEnc.html を 
作る 場合 に は 以下 の よう に 入力 し ます 。 


> BCrGnC p エ 1nChar .htm1 prinECharEno .htm1 


な お 、 ス クリ プ ト エ ンコ ー ダ ー で エン コー ド を 行う と 、IE5 以 上 で し か 動 
作 し な く な り ま す 。 
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旧 用 
ee = 隊 隊 左 い 了 


ボタ ンク リッ ク で 画像 だ け を 切り 替え る 


1mage オ ブ ジ ェクト 名 src=" 画 像 ファ イル 名 





JavaScript を 使用 する と 、Web ペ ー ジ 読み 込み 後に 画像 だ け を 切り 替え る こ 
と が で きま す 。 い ちい ち Web ペ ー ジ 全体 を 読み 込ま ず に 画像 だ け を 変更 で きる 
の で 効率 も よく 、 何 より も 見 た 目 の 演出 と し て 効果 的 で す 。 


D | 5 に A 


用 mage Change1 - Microsoft .… 司 | 同 | 区 


ファ イル ) 編集 E) 表示 お 気 に 入 ” 著 


ボタ ン に より 切り 替え る 
ここ を クリ ッ ク す る と 、 下 に 


EE 通 に 2 9 
[ 寺 ] img1.gif が 表示 され る 





aovwi 較 








ここ を クリ ッ ク す る と 、 img2.gif 
が 表示 され る 
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ファ イル 編集 ) 表示 の 
ボタ ン に より 切り 替え る ボタ ン に より 切り 替え る 





[ 男 箇 
[ 男 上 2 ] ここ を クリ ッ ク す る 





細 柚 ーー と mg3.9if が 表示 ここ を クリ ッ ク す る 
[画像 4 避 人 引 凡 紀 一 一 と 、img4.gif が 表示 
され る 





OU 還 い に 間 Imagechange 1 .html 


<htm1> 
<tit1e>Tmage Change1</tit1e> 
<body bgco1or="#fff8dc"> 
ボタ ン に より 切り 替え る <br /> 
<hr /> 
<form> 
<input type="button" value=" 画 像 1" onc1ick="myImg.src= 
回 "images/1mg1.g1 和 f'" /><br /> 
<1nput type="button" value=" 画 像 2" onc1ick= "myTmg.src= 
回 "images/1mg2.g1 和 f'" /><br の ーーーーーー ーー ーーーーーーーー(21 


<input type="button" value=" 画 像 3" onc1ick="myTmg.src= 


回 "images/1mg3.g1 和 f'" /><br /> 
<input type="button" value=" 画 像 4" onc1ick="my1mg.src= 

回 '1mages/1img4.g1f'" /><br /> 

</form> 

<br /> 

<img src="1mages/img1.g1f" name="myTmg" /> 一 一 (]) 
</body> 

</ htm1> 
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この サン プル で は 、Web ペ ー ジ に 4 つの フォ ー ム ボタ ン が 配置 され て お り 、 そ 
れ ぞ れ の ボタ ン を クリ ッ ク す る と 、4 枚 の 画像 が 切り 替わり ます 。 

① の 部 分 の 画像 を 表示 する た め の <img> タ グ で は 、name 属 性 を 用 いて イメ 
ー ジ オブ ジェ クト に 「myImg] と いう 名 前 を 付け て いま す 。 


ここ で 指定 し た 名 前 は 、 こ の Image オ ブ ジ ェクト を 参照 し た り 属 性 を 設定 す 
る 場合 に 使用 され ます 。 ま た 、src 属 性 の 指定 に よっ て 、Web ペ ー ジ 読み 込み 時 
に は 、「img1.gifl が 読み 込ま れ て 表示 され ます 。 

4 つの フォ ー ム ボタ ン に は 、value 属 性 に よっ て 、 そ れ ぞ れ [ 画 像 1]、「 画 像 2」、 
「 画 像 3]、「 画 像 4」 と 表示 され て お り 、onclick イ ベン ト ハ ンド ラ に よっ て ボタ ン 
が クリ ッ ク さ れ た と き の 動 作 が 指定 され て いま す 。 た と えば 、「 画 像 2] が クリ ッ 
ク さ れる と 、onclick イ ベン ト ハ ンド ラ に 記述 され て いる 部 分 が 実行 され ます 
(② の 箇所 )。 


「myImg」 は 、 先 ほど 指定 し た Image オ ブ ジ ェクト の 名 前 で す 。 こ れ に よっ て 
mylImg の プロ パテ ィ の 1 つ で ある src プ ロ パ ティ が 設定 され ます 。 こ こ で は 
myImg の src プ ロ パ ティ が 「img2.gif」 に 設定 され 、 画 像 が 切り 替わり ます 。 


T I P S 


HTML の 要素 (タグ ) の 属性 の 値 は 、 ダ ブル クォーテーション (") か シン グル 
クォーテーション (' ) で 括る の が ルー ル で す 。 た いて い の Web ブ ラウ ザ で は 括 ら 
な く て も HTML を 解 息 し て くれ ま す が 、 注 意 は し て お いて くだ さい 。 

JavaScript で は 、 文 字 列 を 使用 する 際 に ダブ ルク ォ ー テ ーション も し く は シン 
グル クォーテーション で 括り ます 。 ダ ブル クォーテーション 自体 を 文字 列 と し て 
使い た い 場 合 は 、 次 の よう に シン グル クォーテーション で 括り ます 。 


シン グル クォーテーション を 文字 列 と し て 使う 場合 は この 逆 に な り ま す 。 
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7-2 講 還 思 e 間 … 曽 To 聞い に 


ボタ ンク リッ ク で 画像 を 切り 替え る (拡張 版 ) 


document.Tmage オ ブ ジ ェクト 名 .src = "画像 ファ イル 名 " 








表示 され て いる 画像 を 、 ス クリ プ ト に よっ て 後 か ら 差 し 替え ます 。 イ ン ラ イン 
で スク リプ ト を 書い て 画像 を 差し 替え る こと も 可能 で す が 、 そ れ だ と 複雑 な 処理 
は 行え ませ ん 。 そ の た め ス クリ プ ト は ヘッ ダ 部 に 分 離し て いま す 。 こ れ だ と 、 複 
雑 な 処理 も 記述 し や すく 、 保 守 性 も よく な り ま す 。 


三室. 敵 






簿 Image Change2 - Microsoft Imternet Explorer | 
ファ イル (F) 編集 (E) 表示 () お 気 に 和 AD ツール ①D へ ヘルプ 
ボタ ン に より 切り 替え る 














画像 1 | | 画像 2 | | 画像 3 | | 画像 4 





ここ を クリ ッ ク す る と 、 
img 1.gif が 表示 され る 


同 回 較 
ヘル プ ( い ) 


強 Inage Change2 - Microsoft Internet Explorer 
ファ イル (E) 編集 (E) 表示 ) お 気に入り DQ) ツール ①) 
ポ ボタン に より 切り 替え る 

















ここ を クリ ッ ク す る と 、 
img2.gif が 表示 され る 
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npovwl 較 



















ここ を クリ ッ ク す る と 、 
img3.gif が 表示 され る 


筆 Imaee Chanee2 - Microsoft Internet Explorer 


ここ を クリ ッ ク す る と 、 
img4.gif が 表示 され る 


SR 二 二条 交 1 imagechange2.html 


<htm1> 

<tit1e>Tmage Change2</t ュ it]e> 
<Scrtpt 1anguage="]avascript"> 

く !-- 

function changeTmage(imageName ){ 


document.myTmg.Src = 1mageName: 


} 
7/--> 
< く / scr1pt> 


<body bgco1or="#FFF8dc"> 
ボタ ン に より 切り 替え る <br /> 
<hr /> 
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<form> 
<input type="button" value=" 画 像 1" onc1ick=" 
回 changeTmage( 'mages/img1.g1f')" /> ーー 一 (②) 
<input type="button" value=" 画 像 2" onc1ick= 
回 "changeTmage( '1mages/img2.g1f')" /> 
<1nput type="button" value=" 画 像 3" onc1ick= 
回 "changeTmage('images/img3.g1f')" /> 
<1nput type="button" value=" 画 像 4" onc1ick= 
思 "changeTmage('images/img4.g1f')" /> 
</form> 
<br /> 
<img name="myTmg" src="3mages/1mg1.g1 和 f" ーーーーーーーーーー(D 
</body> 
</htm1> 


し 


「 画 像 1]、「 画 像 2]、「 画 像 3]、「 画 像 4] と 書か れ た ボタ ン を クリ ッ ク す る こと 
に より 画像 を 切り 替え る スク リプ ト で す 。 こ の スク リプ ト で は 、 汎 用 的 に 使え る 
よう に スク リプ ト 内 (<script> 一 </script>) に 関数 を 定義 し 、 さ ら に 引数 に より 
切り 替え る 画像 を 指定 し て いま す 。 

Image オ ブ ジ ェクト に 「myImg」 と いう 名 前 を 付け 、 最 初 は 「img1.gif」 を 表 
示す る よう に 指定 し て いま す (① の 箇所 )。 

ボタ ン を クリ ッ ク す る と 、onclick イ ベン ト ハ ンド ラ に より changelmage 関 
数 が 呼び 出さ れ ま す 。 こ の と き に クリ ッ ク し た ボタ ン に よっ て 、changelmage 
関数 へ 渡す 引数 が 変わ り ま す 。 こ の 引数 に より 画像 を 指定 し て いま す 。 

⑧ の 部 分 の changelmage 関 数 で は 、 変 数 imageName の 引数 に 、 関 数 を 呼 
び 出 す と き に 渡さ れ た 画像 ファ イル の パス が 格納 され て いま す 。 こ の 変数 
imageName を 使っ て 画像 を 変更 する 部 分 は 次 の よう に な り ま す 。 


これ は 、document オ ブ ジ ェクト (この Web ペ ー ジ ) 内 に ある 、myImg と 名 
付け られ た Image オ ブ ジ ェクト の src プ ロバ パテ ィ に 、 変 数 imageName に 格納 さ 
れ て いる パス の 画像 ファ イル を 設定 し て いま す 。src プ ロ パ ティ は 表示 する 画像 
ファ イル を 指定 する も の な の で 、 こ れ で 画像 が 変数 imageName 内 に 格納 され 
て いる 画像 ファ イル に 差し 替え られ ます 。 
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ョ ovwi 開 


/ う 3 中 ヽ 較 責 ド 章 


サム ネイ ル か ら 画 像 を 選ぶ 


1mg src=" サ ムネ イル 画像 " onc11ck="changeTmage( ' 表 示す 
る 画像 ')" 





画像 を 複数 見 せる 場合 に 、 画 像 サイ ズ が 大 きい まま 配置 し こし まう と 、Web 
ペー ジ が 重く な っ て し まう ば か り で は な く 、 見 た 目 が 汚く な っ て し まう 場合 が あ 
り ま す 。 こ の よう な と き に は 、 サ ムネ イル (縮小 し た 画像 ) を 用 意 し て 、 ユ ー ザ ー 
に 、 表 示し た い 画像 の サム ネイ ル を 選択 させ る スタ イル を 使い ます 。 





。 アイ ル ⑥ ロマ 3 表示 信二) ジャ ンプ G プッ 2 マー の (222 
サム ネイ ル 画 像 を クリ ッ ク す る と イメ ー ジ が 切り 替わる 











お ジャ ンプ G⑬ プク マー2B) タ 22⑪D 
サム ネイ ル 画 像 を クリ ッ ク す る と イメ ー ジ が 切り 替わる 














この サム ネイ ル (img1s.gif) を 
クリ ッ ク す る と 、img1.gif が 大 
きく 表示 され る 





の ゃ マ ふ 


この サム ネイ ル (img3s.gif) を 
クリ ッ ク す る と 、img3.gif が 大 
きく 表示 され る 
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人 imagechanged.html 


<htm1> 

<tit1e>Tmage Change3</tit1e> 

<Script 1anguage="]avascript"> 

く !-- 

function changeImage(1imageName ){ 

document.target1mage.Src = 1mageName: 

} 

//==> 

</ script> 

<body bgco1or="#fff8dc"> 

サム ネイ ル 画 像 を クリ ッ ク す る と イメ ー ジ が 切り 替わる 

<hr /> 

<1mg name="targetimage" src="1mages/img1.g1f" /><br /> 

<br /> 

選択 し て くだ さい 。<br /> 

<1mg src="1mages/1mg1s.gif" onc1ick="changeTmage 
回 ("images/img1.gif')" /> 





<1mg src="1mages/1mg2s.gi 和 f" onc1ick="changeTmage 
回 ("images/img2.gif')" /> 

<1mg Src="1mages/1mg3s.g1f" onc1ick="changeTmage 
回 ("images/img3.gif')" /> 

<1mg Src="1images/1mg4s.gi 和 f" onc1ick="changeTmage 
回 ("images/img4.gif')" /> 

</body> 

</htm1> 


し 相 . 琴 費 


この サン プル で は 大 き な 画 像 が 1 つ 、 そ の 下 に サム ネイ ル ( 小 さ な 画 像 ) が 4 枚 配 
置 さ れ て いま す 。 こ の サム ネイ ル を クリ ッ ク す る と 、 大 きか 画像 が 切り 替わっ て 
表示 され ます 。 

スク リプ ト 自 体 は 、「 7-2 ボタ ンク リッ ク で 画像 を 切り 替え る (拡張 版 )] で 紹 
介し た も の と 、 ほ と ん ど 同 じ で す 。 

画像 を クリ ッ ク す る と 、<img> タ グ に 指定 され て いる onclick イ ベン ト ハ ンド 
ラ に より 、 changelmage 関 数 が 呼び 出さ れ ま す 。 クリ ッ ク し た ボタ ン に よっ て 、 
changelmage 関 数 へ 渡す 引数 が 変わ り ま す 。 こ の 引数 で 、 表 示す る 画像 を 指定 
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し て いま す 。 

changelmage 関 数 で は 、 変 数 imageName を 使っ て 画像 を 変更 し て いま す 。 
ドキ ュ メ ント の 階層 構造 に し た が っ て 大 き な 画 像 を 指定 し 、 そ の src プ ロ パ ティ 
に 変数 imageName に 格納 され て いる ファ イル 名 を 設定 し ます 。 


N 0 T E S 


この スク リプ ト は 、NN4 で は 動作 し ませ ん 。 そ れ は 、NN4 で は <img> タ グ 内 
の onclick イ ベン ト ハ ンド ラ を 扱う こと が で き な い か ら で す 。NN4 で も 動作 させ 
た い 場 合 に は 、 サ ムネ イル の 部 分 を 次 に よう に 記述 し て お きま す 。 





この よう に 記述 する と 、 ア ンカ ー の クリ ッ ク に より JavaScript の 命令 が 呼び 出 
され 、changelmage 関 数 を 実行 し ます 。 

これ で NN4 で も 、 サ ムネ イル を クリ ッ ク し て 、 大 きか 画像 が 表示 され る よう 
に な り ま す 。 





人 回 mm 回 回 
画像 を 一 定時 間 で 切り 替え る 


setTimeout( "実行 する 命令 " , 時 間 ) 


document. Image オブジェ クト 名 ・.src=" 画 像 ファ イル 名 " 


バナ ー 広 告 の よう に 、 複 数 の 画像 が 一 定 の 間隔 で 切り 替わっ て いく スク リプ ト 
で す 。 限 られ た スペ ー ス で 複数 の 画像 を 見 せ た い 場 合 な ど に 効果 的 で し ょ う 。 こ 
の サン プル で は 、 自 動 的 に 4 枚 の 画像 を 、1 秒 間隔 で 表示 する た め に 使っ て いま 
す 。 










に 


委 Siiae change - Microsoft.… 司 | 央 | 区 | 
アイ ル ⑥ 編集 6 表示 の O か” 簡 


画像 の スラ イド 表示 


1 秒間 隔 で 画像 が 
切り 替わる 


委 siide chanee - Microsoft.. 司 | 正 | 区 | 
フイ ル () 編集 ) 表示 の W ょ な? 午 


画像 の スラ イド 表示 


































午 slide chanee - Microsoft… 司 | 回 | 区 | 


ファ イル) 編集 表示 お 


画像 の スラ イド 表示 


の e 


年 Slide cnange - wicrosoft 居 | 回 | 区 | 


人 表示 の な 得 
画像 の スラ イド 表示 


ッ 
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39gvwl 較 


9 休 度 、 電 8 ボ 才 林 imagechange4.html 


<htm1> 
<tit1e>S11ide Change</tit1e> 
<script 1anguage="]avascr1pt"> 


く !-- 


var imgNum=1j ーーーーーーーーーーーーーーーーーー ーーーーーーーーーーーーーー- ーー 一 -*2) 


function changeTmage( ){ 
ュ f(imgNum==1 ){ 
document .myTmg.Src= "1mages/1mg2.g1T": 
13mgNum=2j 
}e1se if(imgNum==2 ){ 
document.myTmg.Src= "1mages/1mg3.g1 生 "j 
1mgNum=3: 
}e1se if(imgNum==3){ 
document .myImg.Src= "1mages/1mg4.g1 生 "j 
imgNum=4j 
}e1se if(imgNum==4){ 
document .myImg.Src="1mages/1mg1.g1 季 "j 
1imgNum=1j 
} 
setTimeout( "changeTmage( ) " , 1000) 
} 
7 / =-> 
</ Script> 
<body on1oad="changeTmage( ) " bgco1or="#fFff8dc"> ーーーーーーー①⑪ 
<h3> 画 像 の スラ イド 表示 </h3> 
<hr /> 
<img src="1mages/1mg1.g1f" name="myTmg" /> 
</body> 
</htm1> 


し. 吉本 玩 


この スク リプ ト で は 1 秒 ご と に 画像 が 次 々 に 切り 替わっ て いき ます 。 
Web ペ ー ジ の 読み 込み と 同時 に <body> タ グ の onload イ ベン ト ハ ンド ラ で 
changelmage 関 数 が 呼び 出さ れ 、 ス クリ プ ト が 実行 され ます (① の 箇所 )。 
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また 、Web ペ ー ジ が 読み 込ま れ た 時 点 で 「imgNum」 と いう 変数 に 「1」 が 代入 
され ます (②⑧ の 箇所 )。 そ の た め 、changelmage 関 数 が 最初 に 呼び 出さ れ た と き 
に は 、 変 数 imgNum の 値 は 「1」 に 設定 され て いま す 。 

if 文 で 変数 imgNum が 「1」 な ら ば 、myImg と いう イメ ー ジ オブ ジェ クト の src 
プロ パテ ィ を 「img2.gif] に し て 、 変 数 imgNum に 2 を 代入 し ます 。 こ こ で 、 画 
像 は ③ の 部 分 で 設定 され て いる 「img1.gif] か ら 「img2.gif」 に 切り 替わり ます 。 
画像 を 切り 替え る if-else 文 を 抜け る と 次 の 命令 が 実行 され ます 。 


setTimeout メ ソ ッ ド は 、 一 定時 間 後に 指定 され た 関数 や 命令 を 実行 する た め 
の メソ ッ ド で す 。 こ こ で は 、1000 ミ リ 秒 後 、 つ まり 1 秒 後に 、 再 び change 
Image 関 数 を 呼び 出し て いま す 。 こ の 時 点 で 、imgNum に 格納 され て いる 値 は 
「2」 に な り ま す 。 そ の た め 、 次 に 呼び 出さ れ た changelmage 関 数 で は 、④ の 部 
分 が 実行 され る こと に な り ま す 。 そ こ で 再び 画像 と 変数 imgNum の 値 が 変更 さ 
れ 、 changelmage 関 数 が 呼び 出さ れ ま す 。 これ を 繰り 返し て いく こと に よっ て 、 
4 枚 の 画像 が 次 々 と 切り 替わっ て いき ます 。 


T I P ト 


この サン プル を ご 覧 に な っ て 、「 こ れ な ら ア ニメーション GIF を 使え ば いい じゃ 
な いか 」 と 思わ れる 人 も いる で し ょ う 。 事実 、WWeb ペ ー ジ の 広告 で 用 いら れ て い 
る の は アニ メー ショ ン GIF が ほとん ど で す 。 し か し アニ メー ショ ン GIF の サイ ズ 
(容量 ) は 決し て 小さ く な いた め 、 す べ て の 人 の 環境 の こと を 考え る と 、 大 き な も 
の は な る べく 控え る べき で し ょ う 。 

そこ で 、 ア ニメーション に こだわ ら な い 場 合 は 、JavaScript に よる イメ ー ジ の 
切り 替え を 使う こよ いと 思い ます 。 1 回 スク リプ ト を 記述 し て し まえ ば 、 ア ニ メ 
ーション GIF に 比べ て さま ざま な バリ エー ショ ン を 作る こと が で きま す ( 切 り 替 え 
る イメ ー ジ の 名 前 を 変え る だ け で すか ら )。 ま た プリ ロー ド な ど を 使う こと に よ 
り 、 ユ ー ザ ー に と っ て スト レス の な い ペ ー ジ 表示 を 実現 し や すく な り ま す 。 さ ら 
に 、 こ の 方 法 を 使え ば 、 複 数 の アニ メー ショ ン GIF を 切り 替え て 表示 する こと も 
で きま す 。 
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agvwi 較 


た 1 論 量 1 嗣 ド ' 間 
画像 を ラン ダム に 表示 する 


Math . random( ) * 項 目 数 
Math . ce11( 整 数 に 切り 上 げた い 数 値 ) 
eva1( "連結 する 文字 列 " + 数 値 ): 















いつ も 同じ Web ペ ー ジ で は つま ら な いも の で す 。 と は いえ 、 毎 日 更新 する の 
も 大 変 で す 。 そ ん な と き に 、 ア クセ ント が あっ て 、 ペ ー ジ の イメ ー ジ が 変わ る の 
は よい か も し れ ま せん 。 ペ ー ジ の 画像 を 変更 する だ け で も 、 か なり 印 象 が 変わ っ 
て くる は ず で す 。 こ こ で は 、Web ペ ー ジ の 読み 込み 時 に 表示 され る 画像 を ラン 
ダム に 変え て み ま し ょ う 。 





N random image - Netscape 6 司 | 困 | 区 


= ファ イル (F) 編集 (E) 表示 検索 ⑤) ジャ ンプ 6 
ラン ダム に 表示 する 











RN random image - Netscape 6 司 | 陣 | 区 | 


1 ファ イル (E 編集 《) 表示 検索 ) ジャ ンプ (3 
| ラン ダム に 表示 する 






R random imaee - Netscape 6 選 | 上 | 区 


ラン ダム に 表示 する 








RR random image - Netscape 6 司 | 四 | 区 | 


ラン ダム に 表示 する 





アク セス する た びに 
ラン ダム に 画像 が 表 
示さ れる 
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の randamimage.html 


<htm1> 

<t ュ it1e>random mage</ て ュ t]e> 
<Script 1anguage="]avascript"> 
く !-- 


Var 1Value, rNumber: 


var img1 = new Image()j 
Var 1mg2 = new ITmage( ): 
Var 1mg3 = new Image( ): 
var 1mg4 = new Image( ) 
1mg1.src = "images/img1.g1 和 f": 
1mg2.Src = "images/img2.g1 和 f": 
1mg3.Src = "1mages/1mg3.g1 和 ": 


img4.Src = "images/1mg4.g1f": 


function disp1ayImage( ){ 


Value = Math.random() * 4: 一 -(③) 


rNumber = Math.cei1(1Va1ue ): 


1f(rNumber==0) rNumber++』 一 -(④ 


document.image1.src=eva1( "img" + rNumber + ".src"): ーーー①③ 
了 
7/--> 
</ Script> 
<body on1oad="disp1ayImage( ) " bgco1or="#fff8dc"> 
<h3> ラ ンダ ム に 表示 する </h3> 
<hr /> 


<1mg name="image1" width="100" height="100" /> ーーーー ーー ---②) 


</body> 
</ htm1> 


DEAD 
この サン ブル で は 4 つの 画像 (img1.gif、 img2.gif、img3.gif、 img4.gif) 
を 用 意 し 、Web ペ ー ジ を 読み 込む た びに ラン ダム に 表示 し て いま す 。 
スク リプ ト の 最初 で 、 表示 する 画像 を 扱う Image オ ブ ジ ェクト (img1、 img2、 
img3、img4) を 用 意 し ます 。 こ の 作成 し た Image オ ブ ジ ェクト に 対し て 画像 フ 
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に ) 
: ま を 
本 





1 


ァイル の URI を 指定 し ます (① の 箇所 )。 こ れ に より 画像 が 格納 され 、Image オ ブ 
ジェ クト が 利用 で きる よう に な り ま す 。Image オ ブ ジ ェクト は src 属 性 に URI を 
指定 する と 、 表 示さ れ て いな い 画 像 で も Web ブ ラウ ザ に ダウ ン ロ ー ド し ます 。 

次 に 、 画 像 を 表示 する 位置 を 指定 し ます 。 こ こ で は 、<img> 要 素 を 配置 し 、 
それ に name 属 性 で image1 と 名 付け て いま す (⑧ の 箇所 )。src 属 性 は 、 後 か ら 
スク リプ ト に より 指定 で きる の で 記述 し て いま せん 。 画像 を ラン ダム に 選択 し 表 
示す る 機能 は 、displaylImage 関 数 で 実装 し て いま す 。displayImage 関 数 は 、 
<body> タ グ の onload イ ベン ト ハ ンド ラ で Web ペ ー ジ の ロー ド 時 に 呼び 出さ 
れ て いま す 。 

さて 、 画 像 を ラン ダム に 表示 する と き 、 ど う や っ て 決定 し て いる か と いう と 、 
組み 込み で 乱数 を 発生 する 、 Math オ ブ ジ ェクト の random メ ソ ッ ド を 使い ます 。 


Math .random( ) 


random メ ソ ッ ド は 0 か ら 1 の 範囲 (0、1 も 含み ます ) で 乱数 を 返し ます 。 こ れ 
を 使っ て ラン ダム に 選択 する と いう 機能 を 作り ます 。 表 示し た い 画 像 が 、 た と え 
ば 4 つ だ っ た ら 、 乱数 で 発生 し た 数 値 に 4 を か け ま す (③ の 箇所 )。 す る と 、0 か ら 
4 の 範囲 で さま ざま な か 数値 が 現れ ます 。 し か し 、 こ の まま で は 選択 肢 と し て は 使 
えな い の で 、Math オ ブ ジ ェクト の ceil メ ソ ッ ド で 数 値 を 整数 に 切り 上 げ ま す 。 
ceil メ ソ ッ ド は 、 数 値 自 身 よ り も 大 きい 一 番 近 い 整 数 に 切り 上 げ ま す 。 






その 結果 、 表 の 5 つの 整数 に な り ま す 。0 は ほとん ど 現 れる こと が あり ませ ん 
が 、 一 応 エ ラー 処理 も か ね て 変数 rNumber が 「0] の と き に は 「1]」 に する と いう 処 
理 を 記述 し て 4 つの 整数 に し ます (④ の 箇所 )。 

最後 に この 選択 され た 数 値 を 用 いて 、Image オ ブ ジ ェクト を 指定 し ます 。 それ 
に は eval メ ソ ッ ド を 用 いて 、「img」 と いう 文字 列 と rNumber に 格納 され た 数 値 
を 連結 し ます 。 する と 、img1、img2、img3、img4 の いずれ か の Image オ ブ 
ジェ クト を 表し ます 。 こ れ を 事前 に 用 意 し た 、<img> 要 素 に 対し て 代入 する こ 
と に より イメ ー ジ を 表示 し ます 。 こ れ ら を 行っ て いる の が ⑤ の 箇所 で す 。 
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7-6 中 い 本 。 っ 際 ト 職 


選択 し た 画像 の 説明 を テキ スト ボッ クス に 表示 する 


document. 和 form オ ブ ジ ェクト 名 .e1ement オ ブ ジ ェクト 名 . 
value=" 表 示す る テキ スト " 





画像 の 上 を マウ スカ ー ソ ル が 通過 し た と き に 、 テ キス ト ボ ックス に 説明 が 表示 
され る スク リプ ト で す 。 い くつ か 画像 を 用 意 し て お いて 、 ユ ー ザ ー が 知り た いと 
思っ た 情報 だ け を 表示 させ る こと が 可能 で す 。 


上 


等 Image with Comment - Microsoft Imternet Explorer 


ファ イル FE) 編集 E) 表示 (V) お 気に入り (@⑧ ツー ル ① ヘル プ ⑪ 


画像 の コメ ント を 表示 する 





画像 の 上 を 通過 する と …・ 


ペー ド 





画像 の 上 に マウ スカ ー ソ ル 
を 置く と 、 上 の テキ スト ボ 
ックス に その 説明 が 表示 さ 
れる 
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ト 還 NE 電 生 imagewithcomment.html 


<htm1> 

<tit1e>Tmage with Comment</t ュ て]e> 

<script 1anguage="]avascript"> 

<!-- 

function showMsg(1mageNo){ 
if(imageNo==1 ){ 


document.myForm.myText.value = "ダイ ア ": 

+ 

else if(imageNo==2 ){ 
document.myForm.myText.value = "スペ ー ド ": 


} 

else if(imageNo==3){ 
document.myForm.myText.value = "ハー ト ": 

} 

else if(imageNo==4 ){ 
document.myForm.myText.value = "クロ ー バ ー": 


} 

7/- -> 

</ script> 

<body bgco1or="#fff8dc"> 

<h3> 画 像 の コメ ント を 表示 する </hs> 

<hr /> 

画像 の 上 を 通過 する と ・・・<br /> 

<form name="myForm"> 

<1nput type="text" name="myText" size="20" value=" 画 像 の 説明 " /> 
</form> 

<br /> 

<1mg src="1mages/1mg1.g1 和 f" onmouseover="showMsg(1)" /> 

<1mg src="1mages/1mg2.g1f" onmouseover="showMsg(2)" /><br /> 
<1mg src="1mages/1mg3.gif" onmouseover="showMsg(3)" /> 

<img src="3mages/1img4.g1f" onmouseover="showMsg(4)" /> 
</body> 

</ htm1> 
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用 


この サン ブル で は 、4 つ の 画像 が 並ん で 配置 され 、 そ の 上 に テキ スト ボッ クス 
が 配置 され て いま す 。 マ ウス カー ソル が 各 画 像 の 上 を 通過 する と 、 テ キス ト ボ ッ 
クス に その 画像 に 割り 当て た 説明 が 表示 され ます 。 

画像 の 上 上 を マウ スカ ー ソ ル が 通過 する と 、<img> タ グ の onmouseover イ ベ 
ント ハン ドラ に よっ て showMsg 関 数 が 呼び 出さ れ ま す 。 そ し て 、showMsg 関 
数 で は 引数 に より 、 ど の 画像 か ら 呼び 出さ れ た の か を 特定 し て いま す 。 画像 と 番 
号 の 関係 は 、「DISPLAY」 画 面 で 、 左 上 の ダイ ア が 1、 右 上 の スペ ー ド が 2、 左下 
の ハー ト が 3、 右 下 の ク ロー バー が 4 に な り ま す 。 

showMsg 関 数 で は 、 引数 で 受け 取っ た 数 値 が 格納 され て いる 変数 imageNo 
に より 条件 分 岐 を 行い ます (① の 箇所 )。 こ の 条件 分 岐 に より どの カー ソル が どの 
画像 上 に ある か を 特定 し ます 。 特 定 が で きた ら 次 の よう に し て 、 テ キス ト ボ ッ ク 
ス 内 に テキ スト を 表示 させ ます 。 


テキ スト ボッ クス の 中 に 表示 され る 文字 列 は 、value 属 性 で 設定 で きま す 。 

この サン ブル で は 、「myForm」 と いう 名 前 の form オ ブ ジ ェクト 内 に ある 、 
「myText」 と いう 名 前 の element オ ブ ジ ェクト の value プ ロバ ティ に さま ざま な 
テキ スト を 代入 し て いま す 。 

他 の 画像 の 上 を マウ スカ ー ソ ル が 通過 し た と き に も 、 そ れ ぞ れ 呼 び 出さ れる 関 
数 に よっ て 同様 の 処理 が 行わ れ ま す 。 こ の 結果 、 画 像 の 上 を マウ スカ ー ソ ル が 通 
過す る こと に よっ て 、 フ ォ ー ム に 表示 され る メッ セー ジ が 切り 替わり ます 。 


T I P S 


この スク リプ ト は NN4 で は 動作 し ませ ん 。 そ れ は NN4 で は 、<img> タ グ 内 で 
onmouseover イ ベン ト ハ ンド ラ を 処理 で き な い た めで す 。 そ こ で 、 イ メー ジ の 
部 分 の コー ド の 記述 を 、 次 の よう に 変更 する と 動作 する よう に な り ま す 。 
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7-7 瑞 ] 語 誠 回 |」 敵 | 
マウ ス オ ー バ ー で 画像 が 切り 替わる 
rege オ フェ クト src - ' 画 ファ イル "| 


Tmage オ ブ ジ ェクト 名 .src = "画像 ファ イル 名 " 





マウ スカ ー ソ ル が 重なる と 画像 が 切り 替わる 動作 は 、Web ペ ー ジ を 閲覧 し て 
いる ユー ザー に 対し て 非常 に 効果 的 な 表現 で す 。 自 分 が どこ に マウ スカ ー ソ ル を 
合わ せ て いる の か も わか り ま すし 、 ユ ー ザ ー が クリ ッ ク し た く な る と いう 点 で は 
非常 に 有効 な スク リプ ト で す 。 


生生 人 失い 和信 


妥 imaee chanee on mouse oyer - Microsoft mternet Explo.。 還 | 還 | 区 
ブイ ル (F) 編集 (EC) 表示 ) お 気に入り ⑯ ツー ル ① ヘル プ (H | 
カー ソル が 乗る と イメ ー ジ が 変わ る 


(上 6 


詩 image change on mouse oyer - Microsoft Internet Explo 
イル) 編集 (E) 表示 び ) お 気に入り ツー ル ① ヘル プ ⑬ 
カー ソル が 乗る と イメ ー ジ が 変わ る 








マウ スカ ー ソ ル を 画像 の 
上 に 置く と 、 ド ア が 開く 
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ト 博 培 RE 二 | 本 議 本 定 rollonimage 1 .html 


<htm1> 

<tit1e>1mage change on mouse Over</t ュ ト ]e> 
<Script 1anguage="]avascript"> 

く !-- 

var img1 on = new Image( ) 


var img1 off = new Tmage( ): 
1mg1_on.src="1mages/1mgOpen.g1 和 f": 
img1_off.src="images/1mgCl1ose.g1 和 f": 
function ro11on(targetimage){ 


if(targetimage=="1mage1"){ 
document.1mages[targetimage] .src=1mg1_on.srci 一 (2②) 


function ro11off(targetimage ){ 
if(targetimage=="1mage1"){ 
document.images[targetimage] .src=img1_off.srci 一 (3③) 


了 

// --> 

</ scr1pt> 

<body bgco1or="# 和 ff8dc"> 

<h3> カ ー ソ ル が 乗る と イメ ー ジ が 変わ る </h3> 
<hr /> 

<a href="test.htm1"> 


<1mg name="1mage1" src="1mages/1mgClose.g1 和 f" border="0" 


回 onmouseout="ro11off( ' image1')" onmouseoVe エ = 
回 "ro11on( "1mage1')" /> 

く /a> 

</body> 

</htm1> 


も 8 Ao も っ る 


この サン ブル で は Image オ ブ ジ ェクト を 使っ て いま す 。 こ れ は 、 マ ウス カー ソ 
ル が 画像 に 重なっ た と き に 変化 する 画像 が すぐ に 表示 で きる よう に 、 画像 を プリ 
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ロー ド し て お く た め で す 。 プ リロ ー ド を 組み 込む に は 、 次 の 書式 で 記述 し ます 。 
var <Tmage オ ブ ジ ェクト を 扱う た め の 変数 > = new Tmage( ) 


最初 に Image オ ブ ジ ェクト の 実体 を 生成 し 、 画 像 を 扱う た め の 変数 (名 前 は 任 
意 ) を 用 意 し ます 。 こ こ で は 「img1_on」 と 「img1_off] の 2 つ を 用 意 し て いま す 。 
次 に 、Image オ ブ ジ ェクト に 対し て 画像 を 次 の 書式 で 設定 し て いま す 。 


Tmage オ ブ ジ ェクト 名 .src = "画像 ファ イル 名 " 


Image オ ブ ジ ェクト の src プロ パティ に 、 実際 の 画像 ファ イル 名 を 指定 する と 
自動 的 に 画像 が 取り 込ま れ ま す (① の 箇所 )。 プ リロ ー ド は 、Web ペ ー ジ 読み 込 
み 時 に 行わ な いと 意味 が あり ませ ん の で 、Web ペ ー ジ 読み 込み 時 に 実行 され な 
い 関 数 内 で 、 プ リロ ー ド する ファ イル を 指定 し な いよ う 注 意 し て くだ さい 。 

次 に 画像 を 切り 替え る 部 分 で す 。 画 像 に カー ソル が 重なる と onmouseover イ 
ベン ト ハ ンド ラ に より rollon 関 数 が 呼び 出さ れ 、 カ ー ソ ル が 画像 か ら 外れ た と き 
に onmouseout イ ベン ト ハ ンド ラ に より rolloff 関 数 が 呼び 出さ れ ま す 。 こ の 2 
つの 動作 に より 2 枚 の 画像 を 切り 替え て いま す (② と ③ の 箇所 )。 こ れ ら の 関数 内 
で は Image オ ブ ジ ェクト の src プ ロバ パテ ィ に 、 事 前 に 用 意 し て お いた Image オ ブ 
ジェ クト を 代入 する こと に より 、 画 像 を 切り 替え て いま す 。 引数 を 渡し て いる の 
は 、 複 数 の 画像 を 処理 する の に 対応 する た めで す 。 ここ で 引き 渡し て いる 引数 は 、 
どの <img> 要 素 を 変更 する か を 指定 する た めで す 。 


T I P S 


この サン ブル の スク リプ ト は 、NN4 で は 動作 し ませ ん 。NN4 で は 、<imqg> タ 
グ 内 で onmouseover イ ベン ト ハ ンド ラ 、onmouseout イ ベン ト ハ ンド ラ を 処 
理 で き な い の で す 。NN4 で は 、 イ メー ジ の 部 分 の コー ド を 、 次 の よう に 変更 し ま 
す 。 





7-6 証 加 本 表 ヾ 陣 
クリ ッ カ ブル マッ プ 


<area … onmouseover = "呼び 出す 命令 "> 
<area … onC1ick = "呼び 出す 命令 "> 


<area … hre 和 ="]avascript: 呼び 出す 命令 "> 





クリ ッ カ ブル マッ プ と いう の は 、 現 在 の Web ペ ー ジ の 制作 に お いて な く て は 
な ら な い 手 法 で す 。 1 枚 の 画像 に 対し て 複数 の クリ ッ ク を 設定 で きる の は 、 デ ザ 
イン 性 の 高い メニ ュー な ど に お いて は 必須 で す 。 通 常 、 ク リッ カブ ル マ ッ プ に は 
リン ク し か 設定 で きま せん が 、JavaScript を 使う と さら に 複雑 な 処理 を 付加 する 
こと が で きま す 。 


生生 放す 
ママ ウス カー ソル を 置い て アラ ー ト を 表示 する 


午 Clickable map1 - Microsoft Internet Explorer 


アイ ル ) 編集 CE) 表示 お 気に入り (@) ツー ル ①D AM2⑪ 








この 葉 の 上 に マウ スカ ー 
ソル を 置く と … 


アラ ー ト を 表示 する 
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ママ ウス クリ ッ ク で アラ ー ト を 表示 する 


詩 Clickablemap1 - Microsoft Imternet Explorer 
ブイ ル (E) 編集 CE) 表示 ) お 気に入り ツー ル ① ヘル プ ⑪⑬ 


クリ ッ カ ブル マッ プ か ら JavaScript を 起動 する 








この 葉 を クリ ッ ク 
中 生 ) 


IMicrosoft Internet Explorer | 用 





Clickablemap.html 


<htm1> 

<tit1e>c1ickab1emap1</ti ト 1e> 

<script 1anguage="]avascript"> 

に に 2 フ 

function disp1ayAlert(char message){ 


alert(char_message): 


+ 
/ ガ ェ -> 
</ Script> 


<body bgco1or="#fff8dc"> 
<hs> ク リッ カブ ル マ ッ プ か ら ]avaScript を 起動 する </h3> 
<hr /> 


240 





<1mg Src="1mages/c1ickab1emap.g1 和 "usemap="#map1" border="O" /> 


<map name="map1"> 
<area shape="polygon" coords="16,22,21,91,62,131, 
回 122,134,119,76,74,37" onmouseover="disp]1ayAlert( ト e 
回 "Are you mouseover?')" /> 


回 287,95,231,108,189,138" onc1ick="disp1ayA1ert( 


<area shape="po1ygon" Ser wentrdiooAor( | 
回 "Are you click?')" /> 





< く /maPp> 
</body> 
</htm1> 


人 


クリ ッ カ ブル マッ プ の 中 で は 、 通 常 、 他 の Web ペ ー ジ の リン ク を 張る こと し 
か で きま せん 。 し か し 、 イ ベン ト や JavaScript を 使う と 、 リ ンク を 張る 以外 の 機 
能 を 実現 する こと が で きま す 。 サ ンプ ブル で は 、 次 の よう な クリ ッ カ ブル マッ プ を 
用 意 し て いま す 。 


(74.37) 






(119.76) 
(287.95) 








(21.91) (231.108) 
(122.134) 


(278.166) 
(189.138) 


(243.204) 
(180.207) 











クリ ッ カ ブル マッ プ か ら JavaScript を 呼び 出す に は 、<area> 要 素 に イベ ント 
ハン ドラ を 記述 し ます 。 左上 の 葉 の 部 分 に は onmouseover イ ベン ト ハ ンド ラ を 
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(① の 箇所 )、 右 下 の 葉 に は onclick イ ベン ト ハ ンド ラ を 設定 し て いま ②③ の 箇所 )。 
この イベ ント ハン ドラ か ら displayAlert 関 数 を 呼び 出し て いま す 。 こ こ で は 、 
アラ ー ト を 出力 し て いる だ け な の で 関数 に する 意味 は あま りあ り ま せん が 、 実際 
の 場面 で は さま ざま な 処理 を 行う こと が 考え られ る た め 、 イ ベン ト ハ ンド ラ か ら 
関数 の 呼び 出し を 行っ て いま す 。 


T I P S 


この サン プル で は 、<area> 要 素 に 対し て イベ ント ハン ドラ を 使っ て いる た め 
に NN4 で は 動作 し ませ ん 。 ま た 、Macintosh 版 IE4.5 で も 動作 し ませ ん 。 これ 
は <area> 要 素 に お いて イベ ント ハン ドラ を 用 いる こと が で き な い た めで す 。 

し か し 、 次 の よう に イベ ント ハン ドラ を 使わ な い ス クリ プ ト な ら 、 ク リッ カブ 
ル マ ッ プ の リン ク か ら JavaScript の 命令 を 呼び 出す こと が で きま す 。 


Clickablemap_nn4.html 

<htm1> 
< 上 it1e>C1iojkkab1emap2</ 上 1t1e> 
<BCript 1anguage= "aa8Cript"> 
に 0 
funotion disp1ayA1ert (char meggage ) { 

a1ert (Char_meggage): 
} 
6 の Ko 
< く / 8C エ 1p キ > 
<body bgco1or="# 下 EE8do"> 
<h3> ク リッ カブ ル マ ッ プ か ら Javag8ortpt を 起動 する NN4</h3> 
<hr /> 
<1mg Bro="1mage8/c1iokab1emap .91E" ugemap=" 拓 map1" 
回 border="0" /> 
<map name="map1"> 


<area 8Bhape="po1ygon" coordg="16,22,21,91,62,131,122, 





回 134,119,76,74,37" href="aVa8or1ipt: disp1ayA1ert 
回 ('Are you ol1iock from NN4?')" /> 
<a エ ea 8hape="po1ygon" coordg="180,207,243,204,278,166, 
回 287,95,231,108,189,138" href="avagCript : 
回 digp1ayA1ert('Are you oc1iok from NN4?')" /> 


⑲ 
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この サン プル で 注目 する の は <area> 要 素 の href 属 性 の 部 分 で す 。 本 来 は リン 
ク 先 を 書く べき と ころ に 、 次 の 書式 で 記述 し て いま す 。 


href="]avascrtpt: 呼び 出す 命令 " 


この よう に する と 、JavaScript の 命令 を 呼び 出す こと が で きま す 。 命令 の 代わ 
り に 関数 を 呼び 出す こと も で きま す 。 サ ンプ ブル で は 、 実際 に さま ざま な 機能 を 追 
加 す る こと が で きる よう に 、 関 数 を 定義 し て 呼び 出し て いま す 。 

た だ し 、 こ の よう に し て し まう と 、 残 念 な が ら ク リッ ク に よる イベ ント し か が 取 
れ な く な っ て し まい ます 。 


圏 クリ ッ カ ブル マッ プ の 作成 
クリ ッ カ ブル マッ プ を Web ペ ー ジ に 実装 する に は 、 次 の よう な 記述 が 必要 に 
な り ま す 。 


<1mg src=" 画 像 名 " usemap= "# マ ッ プ 名 "> 
<map name=" マ ッ プ 名 "> 
<area shape=" リ ンク の 形 " href=" リ ンク 先 " /> 


</maP> 


ポイ ント と し て は 、<img> 要 素 の 中 に usemap 属 性 が 必要 に な る こと で す 。 
この 属性 に より 、 ど の マッ プ を イメ ー ジ に 対し て 適用 する か を 指定 し ます 。 
<map> 要 素 は 、 マ ッ プ を ひと まとめ に する 役割 が あり ます 。 実際 に は 、 
<map> 要 素 の 中 に 入っ て いる <area> 要 素 を ひと まとめ に し て いま す 。 

<map> 要 素 に は 、usemap 属 性 で どの マッ プ か と いう こと を 区 別 す る た め に 、 
name 属 性 で マッ プ に 名 前 を 付け ます 。<area> 要 素 は 、 実 際 に イメ ー ジ 上 に リ 
ンク する 範囲 を 作る も の で す 。<area> 要 素 の 主 な 属性 に は 、shape 属 性 、 
coords 属 性 、href 属 性 が あり ます 。 それ ぞ れ 次 の よう に 指定 し ます 。 
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lIHIIM 


rect、 長 方 形 
circle、 円 
shapes リン ク 範 囲 の 形 状 を 指定 する polygon、 多 角形 
default、 リ ンク が 指定 され て 


いな い 部 分 
リン ク 範 囲 の 形状 に し た が っ 
coords て 路 標 を 指定 する 座標 、 半 径 な ど 
href リン ク 先 を 指定 する 絶対 座標 、 相 対 座標 
alt 代替 テキ スト を 指定 する 代替 文字 列 


nohref リン ク が な いこ と を 宣言 する 


な お 、coords 属 性 の 指定 は shapes 属 性 に 何 を 指定 し た か で 変わ り ま す 。 そ れ 
ぞ れ の 対応 を 書く と 次 の よう に な り ま す 。 


rect x1.y1、x2.y2 

circle Wh 

polygon X1, y1、X2, V2、 ……… 、xXN. yN 
default な し 


x1y1 





X2,y2 





default x2.y2 
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DATE・TIME 








aw ・alva 間 


8-1 楓 | い 隊 中 條 


アク セス し た 日 付 を 表示 する 


Date( ) 





アク セス し た 日 付 ・ 時 刻 を 表示 する スク リプ ト で す 。「 た だ いま * 月 * 日 * 時 * 
分 で す 」 と いっ た 表示 を する 場合 に よく 使わ れ ま す 。 こ の スク リプ ト で は 表示 形 
式 は 指定 し て いな いた め 、 コ ンピュータ が 返す 形式 で 表示 し て いま す 。 ま た 、IE 
と NN で も 表示 形式 が 違い ます 。 


午 Print Date 1 - Microsoft Internet Explorer 


ファ イル 編集 E) 表示 お 気 に 和 D⑱ ツー ル D へ JI プ 


時 間 を 表示 する 


あな た が アク セス し た 時 間 は 
Mon Oct 29 0352.22 2001 で す 。 





Ni Print Date 1 - Netscape 6 





あな た が アク セス し た 時 間 は 、 


Mon Oct 29 03:53:07 GMT+0900 2001 で す 。 
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る 0 に 国 GEAUE printdate 1 .html 


<htm1> 
<tit1e>Print Date1</ て 11e> 
<body bgco1or="#fFff8dc"> 
<h3> 時 間 を 表示 する </h3> 
<hr /> 
あな た が アク セス し た 時 間 は 、<br/> 
<Script 1anguage="]avascript"> 
く !-- 

document.write(Date( ) ) 
7/--> 
</ script> 
で す 。 
</body> 
</htm1> 


人 


重要 と な る の は 、「Date()」 と 記述 し て いる Date オ ブ ジ ェクト で す 。 こ れ は シ 
ステ ム が 持っ て いる 日 付 ・ 時 刻 を 返し ます 。 こ こ で 返っ て くる 日 付 ・ 時 刻 は ロー 
カル マシ ン 、 要 する に 自分 の マシ ン に 設定 し て ある も の で す 。 


上 記 の 記述 で は 返っ て きた 日 付 ・ 時 刻 を 画面 に 表示 し ます 。document オ ブ 
ジェ クト の write メソ ッ ド は 次 の よう な 書式 で す 。 


document .write( 表 示す る テキ スト ) 
注意 点 と し て 、IE と NN で は 返っ て くる 日 付 ・ 時 刻 の 形式 が 異な り ま す 。 こ れ 
で は Web ペ ー ジ の デザ イン 上 困る こと が あり ます の で 、「8-2 日 付 時 間 の 書式 


を 指定 し て 表示 する 」 で 紹介 する 、 書 式 を 指定 する スク リプ ト も 併せ て ご 覧 くだ 


さい 。 
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ョ WI1・ aivd 較 


ョ WIL・ 31va 較 






9-2 喘 ヾ 随 剛 隅 
日 付 時 間 の 書式 を 指定 し て 表示 する 


Date オ ブ ジ ェクト 名 =new Date( ) 


Date オ ブ ジ ェクト 名 .getYear( ) 
Date オ ブ ジ ェクト 名 .getMonth( ) 











Date オ ブ ジ ェクト 名 .getDate( ) 
Date オ ブ ジ ェクト 名 .getHours( ) 
Date オ ブ ジ ェクト 名 .getMinutes( ) 


アク セス し て きた 、 日 付 ・ 時 刻 を 表示 する と き に 、 シ ステ ム が 返し て きた まま 
の 書式 で 表示 する の は 味気 が な いも の で す 。 ま た 、IE と NN で は 形式 が 異な る 問 
題 も あり ます 。 そ こ で 、 日付 ・ 時 刻 に 書式 の 指定 を し て 表示 する よう に し ます 。 


当 Print Date2 - Microsoft Internet Explorer 同 回 四 回 


| カイル 編集 《) 表示 お 気 に AQ ッ -AO AM2⑳ 茜 


日 付 を 表示 する (書式 付 ) 








た だ いま 2001 年 1 月 5 日 15 時 56 分 で す 


思 Print Date2 - Netscape 6 


日 付 を 表示 する (書式 付 ) 





た だ いま 2001 年 11 月 5 日 15 時 56 分 で す 





に printdate2.html 


<htm1> 

<tit1e>Print Date2</t ュ it]e> 

<Script 1anguage="]avascript"> 

<!-- 

mySysDate=new Date( ) : ーー 一 一 (1) 

myYear=mySysDate .getFu11Year( ) 

myMonth=mySysDate .getMonth( ) 

myDate=mySysDate . getDate( ) 

myHour=mySysDate .getHours( ) 

myMinutes=mySysDate.getMinutes( ) : 

7/--> 

</ script> 

<body bgco1or="#fff8dc"> 

<hs> 日 付 を 表示 する (書式 付 )</h3> 

<hr /> 

<script 1anguage="]avascript"> 

く !-- 

document. ぃ rite(" た だ いま "myYear, "年 " myMonth+1," 月 "myDate, 

回 "日 "myHour, "時",myMinutes, "分 で す "): 

// =-> 

</ script> 





</body> 
</htm1> 


この スク リプ ト で は 、 ま ず ① の 部 分 で Date オ ブ ジ ェクト を 生成 し て いま す 。 


生成 し た Date オ ブ ジ ェクト 「mySysDate」 か ら 年 、 月 、 日 、 時 、 分 な ど を 、 
それ ぞ れ メソ ッ ド を 使っ て 抜き 出し ます 。 主 な メソ ッ ド に は 、 次 の よう な も の が 
あり ます 。 
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この 中 で 注意 が 必要 な の が 、getMonth メ ソ ッ ド で は 月 が 「0 一 11」 の 数 字 で 
抜き 出さ れる こと で す 。 そ の た め 、 表 示す る と き は 、 月 の 値 が 格納 され て いる 変 
数 に 「1」 を 足 さ な いと 正しい 月 が 表示 され ませ ん 。 

また 、 西 暦 の 扱い に 関し て で す が 、getYear メ ソ ッ ド で は 、1999 年 まで は 西 
礎 の 下 2 桁 を 、2000 年 以降 は 4 桁 で 西暦 を 返し 、getFullYear メ ソ ッ ド は すべ て 
4 桁 の 西暦 を 返し ます 。 た だ し 、getFullYear は IE4、NN4 以 降 で し か 対応 し て 
いな いた め 、 使 うと き は 注意 し て くだ さい 。 

getYear メ ソ ッ ド は 、 下 2 桁 と 4 桁 を 混在 し て いる た め 、2000 年 を また が る 西 
暦 を 扱い 、 比 較 な ど を 行う と 、 正 し く 処 理 で き な い 場合 が あり ます 。NN4 の 一 部 
の バー ジョ ン で は 、2000 年 を 100 年 と 表示 し て し まい ます の で 、 こ れ に も 注意 
が 必要 で す 。 


い 
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8-3 証 i 請 記 回 (本 


曜日 を 表示 する 
Array オ ブ ジ ェクト 名 = new Array (配列 の 要素 ) 
Date オ ブ ジ ェクト 名 .getDay( ) 





曜日 を 出力 する スク リプ ト で す 。 日 本 語 で 曜日 を 出力 する に は 、 ち ょ っ と し た 
変換 が 必要 に な り ま す 。 日 付 を 出す の に 比べ て 、 そ の た め の 処 理 を 少し 加え な く 
て は な り ま せん 。 


人 S 惨 LA Y 


育 Print Date3 - Microsoft Imternet Explorer 
アイ ル (E) 編集 E) 表示 ) お 気 に 和 D⑱) ツー ル ① ヘル プ ⑬ 


曜日 を 表示 する 


た だ いま 2001 年 10 月 29 日 月 曜日 で す 








Cd 才 。R 」 を 7E printdate3.html 


<htm1> 

<tit1e>Print Date3</tit1e> 
<Script 1anguage="]avascript"> 
く !-- 

mySysDate=new Date( ) 
myYear=mySysDate .getFu11Year( ) : 
myMonth=mySysDate .getMonth( ) : 
myDate=mySysDate . getDate( ) 
day=new Array(" 日 "月 7" 火 り 7 水 "" 木 "" 金 "" 土 "): 一 ーー 一 ーー① 
myDay=day [mySysDate .getDay( ) ] : 
に に ン 2 


</ scr1pt> 
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ョ WIL・ ilva 較 


<body bgco1or="#fff8dc"> 
<h3> 曜 日 を 表示 する (書式 付 )</h3> 
<hr /> 
<script 1anguage="]avaScript"> 
く !-- 
document.write(" た だ いま "。myYear, "年 " 。myMonth+1," 月",myDate, 
回 "日 "myDay, "曜日 で す "): 


// ニ <> 

</ script> 

</body> 

</htm1> 

曜日 を 取得 する getDay メ ソ ッ ド は [0 6」 の 数 字 を 返し ます 。 次 の 表 の よう 
に 、「0」 が 日 曜日 、「1」 が 月 曜日 、……… 、「6」 が 土曜 日 と いう こと に な り ま す 。 


本 議 較 90 1 2 325 6 
軒 症 較 日 月 火 氷 本 人 金 土 


この た め 、 返 され た 数 字 を 曜日 に 変換 する 必要 が あり ます 。 方 法 と し て は 、if 
文 を 使っ て 、 次 の よう に 記述 する 方 法 が あり ます 。 





この よう に 記述 し て も よい の で す が 、 も う 少 し スマ ー ト に 書く と 、 こ の サン プ 
ル の よう に 、 配 列 (Array) を 使う こと に な り ま す 。Array オ ブ ジ ェクト を 使っ て 
配列 (サン プル で は day 配 列 ) を 用 意 し ます 。Array オ ブ ジ ェクト は 、① の 部 分 の 
よう に new を 使っ て 生成 し ます 。 
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Array オ ブ ジ ェクト を 生成 する と き に 、 曜 日 の 一 覧 を 配列 に 代入 し て いま す 。 
配列 の 添え 字 は 「0] か ら は じ ま り 、 さ ら に getDay メ ソ ッ ド で 戻っ て くる 値 の 「0]」 
は 日 曜日 に 対応 する の で 、 配 列 の 要素 を 「 日 、 月 、 火 、 水 、 木 、 金 、 土 ] と し て い 
ます 。 

ここ で day 配 列 か ら 読み 出す に は 、 以 下 の よ うな 書式 で 行い ます 。 


day [添え 字 ] 
day 配 列 に は 、 次 の よう な 値 が 入っ て いま す 。 


妥 芋 dsyiol dsytt] dy2 dayB] dsy4] dayI5] daytgl 
還 昌 月 火 本 例 王 


ここ で 、getDay メ ソ ッ ド は 数 値 を 返し て くる の で は 、 読 み 出し 次 の よう に な 
り ま す 。 


mySysDate .getDay( ) 





後 は 、 こ の よう に し て 得 ら れ た myYear、myMonth、myDate、myDay を 
document.write メ ソ ッ ド に より 表示 させ れ ば 完成 で す 。 

年 月 日 の 情報 の 取得 ・ 表 示 に つい て は 「8-2 日 付 時 間 の 書式 を 指定 し て 表示 す 
る 」 の サン ブル と 変わ り ま せん の で 、 そ ちら を 参照 し こく だ さい 。 
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ョ WI1・ iva 較 


遼 ド * 障 暗い 蘭 


最終 更新 日 を 挿入 する 


document.1astModified 











Web ペ ー ジ で よく 見 か ける も の と し て 、 最 終 更新 日 と いう も の が あり ます 。 
コン テン ツ が 増え て くる と 、 ユ ー ザ ー は 更新 され た ペー ジ が ある か どう か が わか 
り に くく な っ て きま す 。 そ ん な と き に 、 ト ッ プ ペー ジ に 最終 更新 日 を た 入れ て お く 
と 、 更 新 さ れ た か どう か が すぐ に わか り ま す 。 


きっ ます 


陣 Last modified - Netscape 6 
。 ファ イル (F) 編集 (E) 表示 ( び ) 検索 G) ジャ ンプ (G) ブッ カマ ー ワ (B) が (1) ヘル プ (H 


最終 更新 日 を 挿入 する 








最終 更新 日: 2001 年 10 月 95 日 





ョ WII・ iiva 較 


0 凡 ) 放 も コ 邊 lastmodified.html 

<htm1> 

<tit1e>Last Modi 和 fied</t ュ 1e> 

<body bgco1or="#fff8dc"> 

<h3> 最 終 更新 日 を 挿入 する </h3> 

<hr /> 

<Script 1anguage="]avascript"> 

く !-- 
var 1mDateStr = new Date(document.1astModified) : ーーーーー① 
var 1mYear = 1mDateStr.getFu11Year( ) 
var 1mMonth = 1mDateStr.getMonth( ) + 1: 
var 1mDate = 1mDateStr.getDate( ) 
document.write( "最終 更新 日 : " + 1mYear + "年 " + 1mMonth + 

回 "月 " + 1mDate + "日 <br />"): 

7/--> 
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</ Script> 
</body> 
</htm1> 


0E2O い 人 LU 


この スク リプ ト で は 、 フ ァイル の 最終 更新 時 間 を 最終 更新 日 と し て 扱っ て いま 
す 。 そ の た め 、 ま ず フ ァイル の 最終 更新 時 間 を 取得 し て いま す 。 フ ァイル の 最終 
更新 時 間 は 、document オ ブ ジ ェクト の lastModified プ ロ パ ティ に 格納 され て 
いま す 。 

この プロ パテ ィ を 直接 表示 し て も 確か に 最終 更新 時 間 が わか る の で す が 、 そ れ 
で は 表示 書式 を コン トロ ー ル する こと が で きま せん 。 そ の た め に 、① の 部 分 の 
よう に Date オ ブ ジ ェクト の 引数 と し て 与え ます 。 す る と 、 最 終 更新 日 を 格納 し 
た Date オ ブ ジ ェクト が 生成 され ます 。 

この Date オ ブ ジ ェクト か ら 年 、 月 、 日 を 取り 出す メソ ッ ド を 用 いて 個別 に 値 
を 取り 出し 、 画面 上 に 表示 し て いま す 。 


T 1 P ト 】 


document.IastModified プ ロ パ ティ は サー バー 上 の 時 間 を 返し ます 。 そ の 
た め 、 さ ま ざ ま な トラ ブル が 発生 する 可能 性 が あり ます 。Web サ ー バ ー に よっ 
て は document.IastModified プ ロ パ ティ を 返さ な いも の が あり ます 。 

また 、Web ブ ラウ ザ で も 正しく 動作 し な いも の が 多数 あり ます 。 現在 、 動 作 
が 確認 で きる も の で は 、Windows 上 で は IE5 以 降 、NN4 以 降 、Macintosh 上 
で は IE5 以 降 、NN6 以 降 で し か 正しく 動作 し な いよ う で す 。 

その た め 、 イ ンタ ーネット 上 で 公開 する ファ イル に この スク リプ ト を 用 いる の 
は あま りお 勧め し ませ ん 。 対象 と な る Web ブ ラウ ザ が 限定 で きる イン トラ ネッ 
ト な ど で 使 う の が よい と 思い ます 。 
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ョ WI1・ EMI 


ョ WII・ aiva 識 


9-5 1 馬 凍 1 硬い 


時 間 に よ っ て 異な る 挨拶 文 を 表示 する 
Date オ ブ ジ ェクト 名 .getHours( ) 
ュ f-else 文 





アク セス する 時 間 に よ っ て 、 異 な る 挨拶 文 を 表示 する Web ペ ー ジ を 実現 する 
スク リプ ト で す 。 簡単 な も の で す が 、 案 外 よい 効果 を 生み ます 。 こ こ で は メッ セ 
ー ジ だ け 変 更 し まし た が 、 背 景色 や スタ イル シー ト の テン プレ ー ト な ど を 変え る 
こと に より 、 朝 と 夜 の Web ペ ー ジ の イメ ー ジ を 変え る と いっ た こと も 可能 に な 
り ま す 。 


まま 生 / F 内 すず 


等 Messae Time - Microsoft Internet Explorer 


ファ イル FE) 編集 (E) 表示 ) お 気に入り D(⑳ ウー ル ① へ ヘルプ 


時 刻 に よっ て メッ セー ジ が 変わ る 


お は よう ご ざい ます ーー 5:00am か 59:59am の 
お は よう ご ざい ます れれ 


に 





午 Message Time - Microsoft Internet Explorer 


プア イル (E) 編集 E) 表示 ) お 気に入り ツー ル ① ヘルプ 


時 刻 に よっ て メッ セー ジ が 変わ る 


ニー ん に 10:00am か ら 16:59pm 
ら 人 に 2 の 間 に 表示 され る 


等 Messaee Time - Microsoft Internet Explorer 


プイ ル (E) 編集 EC) 表示 ) お 気 に 和 D ウール ① ヘル プ (⑪ 


時 刻 に よっ て メッ セー ジ が 変わ る 





ー 17:00pm か ら 21:59pm の 
SA 間 に 表示 され る 
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SECTION 8-5 時間 に よっ て 異な る 挨拶 文 を 表示 する 


衝 


等 Messaee Time - Microsoft Internet Explorer 


プア イル (F) 編集 EE) 表示) お 気に入り ツー ル ① ヘル プ ⑪ 





時 刻 に よっ て メッ セー ジ が 変わ る 


ね な さい 22:00pm か ら 4:59pm の 
間 に 表 示さ れる 





人 timemessage.html 


<htm1> 
<tit1e>Message Time</t ュ t]e> 
<Script 1anguage="]avascr1pt"> 
く !-- 
Tunction printMessage( ){ 
date=new Date( ): ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー( リ ) 
myHour=date .getHours( ): 一 ーーーーーーーーーーーーーーーーーーー② 
if(5<=myHour && myHour <10){ 
document.write(" お は よう ご ざい ます "): 
} 
else if( 10<=myHour &8& myHour <17 ){ 
document.write(" こ ん に ち は "): 
} 
e1se if( 17<=myHour && myHour <22){ 
document.write(" こ ん ば ん は "): 
else{ 
document.write( "ね な さい ")j』 


ョ WIL・ avq 較 


} 

7/--> 

</ Script> 

<body bgco1or="#Fff8dc"> 
<h3> 時 刻 に よっ て メッ セー ジ が 変わ る </h3> 
<hr /> 


<Script 1anguage="]avascr1pt"> 
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ョ wl・ ョ lva 議 


1 
1 


PrintMessage( ) : 
7/- -> 
</ Script> 
</body> 
</ htm1> 


8 人間 拉 に 】 


この スク リプ ト は 非常 に 簡単 な も の で す 。 まず ① の 部 分 で 、 現 在 時 刻 を 取得 す 
る た め に Date オ ブ ジ ェクト を 生成 し ます 。 


その 後 、 生 成 さ れ た Date オ ブ ジ ェクト か ら 「 時 ] を 取り 出し ます (⑧④ の 箇所 )。 


「 時 ] を 取り 出す に は getHours メ ソ ッ ド を 用 いま す 。 取 り 出 し た 「 時 」 は 変数 
myHour に 格納 され ます 。 
後 は 、if-else 文 を 用 いて 、 時 間 に よ り 異な っ た 処理 を 行っ て いま す 。 


上 記 の if 文 の 条件 は 、5 時 か ら 10 時 まで の 間 と いう こと で す 。 「<10] で すか ら 、 
10 時 に な っ た ら 、 こ の 条件 か ら は 外れ て いま す 。 
この 条件 分 岐 を 多く する こと で 、 よ り 細 か な 処理 が 可能 と な り ま す 。 
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var 変数 = new Date( 西 暦 , 月 , 日 ): 
Math.cei1( 値 ) 
Math .f1oor( 値 ) 





この スク リプ ト は 、 設 定 さ れ た 日 まで 、 後 何 日 か を 表示 する も の で す 。 恋人 の 

















誕生 日 、 結 婚 記 念 日 、 原 稿 の 締め 切り な ど ま で カウ ント ダウ ン す る こと が で きま 
す 。 


で PE に で 放 ・ 


等 CountDown ー 症 icrosoft Internet Explorer 


フイ ル (FE) 編集 CE) 表示 (\) お 気 に 入 D⑱) ツー ル ① 人 ルプ 尊 


カカ ウド 包 ウ ジジ 








2002 年 まで あと 64 日 で す 。 





ョ WI1・ avq 較 


Ac 前 RA USEh countdown.html 


<htm1> 

<tit1e>CountDown</t ュ t1e> 

<script 1anguage="]avascript"> 

く !-- 

var SysDate=new Date( ) 

var AniDate=new Date(2oo2,0,1) : 一 ーーーーーーーーーーーーー ズ ひい 
days=(AniDate.getTime( ) - SysDate.getTime( ) )/(24*60*60*1000) ーー② 
//--> 

</ Script> 

<body bgco1or="#fff8dc"> 

<h3> カ ウン ト ダ ウン </h3> 

<hr /> 


<Script 1anguage="]avascr1pt"> 
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_ IMM 央 有 し 


く !-- 
document.write( "2002 年 まで あと ", 


回 Math.cei1(days ), "日 で す 。") : ーーーーーーーーーーー 一 (3③) 
= ェ ュ テ 
く / Script> 
</body> 
</htm1> 


この スク リプ ト で は 、 カ ウン ト ダ ウン の 対象 と し て 設定 し た 日 に ちか ら 、 現在 
の 日 に ち を 引く こと に より 、 後 何 日 ある か を 計算 し て いま す 。 日 に ちの 設定 に は 
Date オ ブ ジ ェクト を 用 いま す 。 設定 を する 書式 は 次 の よう に な り ま す 。 


Var 変数 = new Date( 西 暦 , 月 , 日 ): 


サン ブル で は 2002 年 1 月 1 日 を カウ ント ダウ ン の 対象 と し て いま す (① の 箇所 )。 
この と き 注 意 が 必要 な の が 、「 月 」 に 設定 する 値 は 0 か ら は じ ま る の で 、 指 定 し た 
い 月 より も 「1」 少 な い 数 値 を 設定 する こと で す 。 た と えば 、1 月 な ら 「0」、12 月 で 
「11」 を 設定 する こと に な り ま す 。 

この 後 、 設 定 され た 指定 日 か ら 現在 の 日 付 を 引く の で す が 、 こ こ で いく つか 考 
えな く て は な ら な い 問 題 が あり ます 。 

まず 、 引 か れ た 結果 は ミリ 秒 (1/1000 秒 ) 単 位 で 表現 され る と いう こと で す 。 
この 結果 を 、「 日 」 に 変換 する 必要 が あり ます 。 変換 は 、1 日 に 相当 する 「24 (時 
間 ) x60( 分 ) X60( 秒 )x1000(1 秒 1000 ミ リ 秒 )」 で 割り 算 し ます 。 こ の 引き 
算 と 割り 算 の 処理 を 行っ て いる の が ⑧ の 部 分 で す 。 な お 、 も し も 設定 し た 日 を 週 
ぎ て いる 場合 は 、 返 っ て くる 値 が マイ ナス に な り ま す 。 

次 に 、 こ の まま で は 、 割 り 算 し た 結果 が 必ず し も 整数 に な ら な いと いう こと で 
す 。 た と えば 、「 あ と 10.38475 日 で す ] と いわ れ て し まい ます 。 こ れ で は あま り 
うれ し く な い の で 、 整 数 に し な く て は な り ま せん 。 こ の 処理 に は 切り 上 げ を 行う 
Math オ ブ ジ ェクト の ceil メ ソ ッ ド を 使っ て いま す (③ の 箇所 )。 な お 、 値 の 切り 
上 げ 、 切 り 捨 て は 、 次 の 書式 で 行う こと が で きま す 。 


ョ WIL・ aiva 識 


Math . ce11( 値 ) -=ーーーーーーーーーーー- 切り 上 げ 
Math .f1oor( 値 ) < ユーーーーーー-- 切り 捨て 
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SECTION 8-6 @ カウ ント ダウ ン 


これ で 小数 の 部 分 が 切り 上 げ ら れ て 整数 に な り 、 指 定 し た 日 まで の 日 数 を 表示 
する こと が で きま す 


Netscape Navigator の 隠し コマ ンド 


NN に は さま ざま な 隠し コマ ンド が あり ます 。P.180 で 紹介 し て いる 、 内 
蔵 デ バッ ガ の 呼び 出し も その うち の 1 つ で す 。 

その 他 に も 、NN に つい て の 情報 を 表示 する 「about:]、 キ ャ ッシュ ファ 
イル の 内 容 を 表示 する 「about:cache」 な ど が あり ます 。 コ マン ド の 入力 に 
は 、[:」 (セミ コロ ン ) で は な く 「:」 (コロ ン ) を 使う こと に 注意 し て くだ さい 。 

な お 、NN6 で は 、 こ うい っ た コマ ンド が 、NN4 と 比較 する と 減っ て いる 
よう で す 。 


マ NN6 で 「about:cashe」 を 実行 し た と ころ 


Memory cache device 


Number of entries: 139 

Marimum storage size: 4194304 Bytes 
Storage in use: 1094596 Bytes 
ep ei waee Teport: 


List Cac 


Disk cache device 


Number of entries: 37 
Maximum storage size: 51200000 Bytes 
Storage in use: の Bytes 


Cache C:\Documents and Sett ings\naokatsu hi rayama.BOOK2-G\Application 
Directory: AI の Is sltWCache 
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WII・ EMI 


9-7 員 い 前 員 い 陣 


カレ ンダ ー を 表示 する 


Date オ ブ ジ ェクト 名 . setDate( 指 定 する 日 付 ) 
1f( ( (西暦 %4==0 ) 8&&( 西 暦 %100 ! =0) ) | | (西暦 %400==0) ) 




















付 を 表示 する スク リプ ト を 応用 し て 、 カ レン ダー を 表示 する スク リプ ト を 作 
る こと が で きま す 。 最 近 で は 業務 シス テム を イン トラ ネッ ト で 構築 し て いて 、 こ 
うい っ た カレ ンダ ー を JavaScript で 作る と いっ た こと は よく 行わ れ て いま す 。 


午 show calendar - Microsoft Internet Explorer 周回 四 


カレ ンダ ー を 表示 する 





| 2001 年 1 月 。 





ISmm Mon Tue Wed Thr Fri 較 計 
IF BE B 5 
B B PFO [2 
17 ls H9 go 
四 院 了 四 凶 耳 了 臨 了 


Be 29 BOBT_ 











WII・ aiva 詳 

















showcalender.html 


<htm1> 
<tit1e>Show Ca1endar</ て it1e> 
<SCcript 1anguage="JavaScript"> 
く !-- 
function showCalender( ){ 

var year, today, startDay 


var date=new Date( ) : 
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var monthdays=new Array 


回 0383289335B05 は 3053H53d5303 は は 13023 出 937005Em っ きこ ee こり 


var days=new Array 

回 ("Sun"」"Mon"。"Tue" "Wed" 。"Thr"」 "Fr" "Sat")) 一 ーーーーー③② 
year=date .getFu11Year( ) : 
today=date .getDate( ) 


// 年 、 う る う 年 の 設定 

1f(((year%4==0)8&&(year%100!=o) ) | | (year%400==o) ){ ーーーーー③ 
monthdays[1]=29』 

} 

thisMonthdays=monthdays[date.getMonth( )]: 一 ーーーーーーーー④ 


date . setDate(1 ) : RIE 


startDay=date.getDay( ) 


// 年 ・ 月 表示 


document.write( "<tab1e border='1'>"): 





document.write("<tr><th co1span='7' bgco1or='fffafa'>" ) 
document.write(year,' 年 ',date.getMonth( )+1,' 月") 


document.write( "</th></tr>" ) 


// 曜日 の 表示 
document.write( "<tr>" ) : 
fox(#=0j1<73++){ 一 一 ーーーーーーーーーーーーーーーーー ーーーーーーー(6) 
if(i==0){ 
document.write( "<th bgco1or='#Ffb6c1'>"」 
回 days[i],"</thx")j 
} 
else if(i==6){ 
document.write( "<th bgco1or='#6495ed'>"。 
回 days[i] ,"</th>" ) 
} 
else{ 
document.write( "<th>" days[i] "</th>")j 


} 


document.write( "</tr>" ) 


// 日 に ちの 表示 
document.write( "<tr>" ): 
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WII・ aiva 較 


Var Co]=0: 

for(1=0:i<startDay j++ ){ 
document.write( "<td>&nbspi</td>" ) : 
CoO]++』 

} 

for(i=1j1<=thisMonthdaysi ュ ++){ 
document .write( "<td>" ) : 
ェ if( ュ ==today ){ 


document.write( "<font co1or='# 和 ffO000'><b>" ) 


|: 
document.write(1) : 
ュ f(==today ){ 
document.write( "</b></font>" )j 
} 
document.write( "</td>" ) : 
て Co]++』 
if(co1==7){ 
document.write( "</tr>\n<tr>" ) 
co1=0j 


} 
document.write( "</tab1e>" ) 
} 
7/ - -> 
</ Script> 
<body bgco1or="#fFffT8dc"> 
<h3> カ レン ダー を 表示 する </h3> 
<hr /> 
< く Scr1pt 1anguage="]avascript"> 
く !-- 
showCal1ender( ) 
7/--> 
</ Script> 
</body> 
</ htm1> 


264 


ESTATESS 

この サン プル に は 、 こ の セク ショ ン で これ まで に 説明 し て きた 、 日 付 を 扱う ス 
クリ プ ト の さま ざま な テク ニッ ク が 使わ れ て いま す 。 基本 的 に は 、Date オ ブ ジ 
ェクト を 使っ て 現在 の 日 付 を 取得 し 、 そ れ を 加工 し て カレ ンダ ー を 生成 する の に 
必要 な 情報 を 生み 出し て いま す 。 

月 の 一 覧 を 表示 し た カレ ンダ ー を 作成 する の に 必要 と な る の は 、「 現 在 の 月 が 
何 日 まで ある の か 」 と いう こと と 、「 何 曜日 か ら は じ ま る の か 」 と いう こと で す 。 
それ ぞ れ の 月 が 何 日 まで ある の か と いう の は 、 ご く 一 部 の 例外 (うる う 年 ) を 除 
いて 決ま っ て いま す 。 何 日 ある か を 設定 し て いる の が ① の 部 分 で す 。Array オ ブ 
ジェ クト を 用 いて 配列 (Monthdays 配 列 ) を 作成 し 、1 月 か ら 12 月 が それ ぞ れ 何 
日 ある か を 設定 し て いま す 。 

また 、⑧ の 部 分 で は 、 同 様 に 配列 を 用 いて 、 曜 日 の 一 覧 (Days 配 列 ) を 作成 し 
て いま す 。 さ ら に 、 年 と 日 付 を それ ぞ れ 取り 出し 、 変 数 「year」、「today」 に 設 
定 し 4 桁 の 西暦 を 取得 する た め に getFulIYear メ ソ ッ ド を 用 いて いま す 。 

そし て 、③ の 部 分 で 、 月 に 何 日 ある か に つい て の 例外 で ある 、 う る う 年 の 処理 
を 行っ て いま す 。 う る う 年 は 4 年 に 一 度 や っ て くる の で す が 、 次 の よう な 条件 で 
特定 する こと が で きま す 。 


@ 西 暦 が 4 で 割り 切れ て 、100 で 割り 切れ な い 年 は うる う 年 
@ 上 記 の 例外 と し て 400 で 割り 切れ る 年 は うる う 年 


判定 し た 結果 、 う る う 年 に 該当 する 年 に は 、2 月 の 日 に ち (monthdays[1]) の 
数 字 を 29 日 に し て いま す 。 

うる う 年 の 処理 が 終わ っ た ら 、 現 在 の 月 に 何 日 ある か と いう こと を 保持 し て お 
く 変数 [thismonthDays」 を 設定 し ます 。④ の 部 分 で 、monthdays 配 列 の 添え 
字 に date.getMonth と 指定 し て 月 の 情報 を 設定 し 、 今 月 は 何 日 ある か を 取り 出 
し て いま す 。 

この 後 、⑤ の 部 分 で 、 今 月 が 何 曜日 か ら は じ ま る か を 調べ ます 。 ま すず Date オ 
ブ ジ ェクト 「date」 の 日 付 を 、setDate メ ソ ッ ド を 使っ て 「1 日 」 に 設定 し ます 。 現 
在 の 日 付 は 、 す で に 変数 today に と っ て ある の で 問題 あり ませ ん 。 次 に 、 こ の 1 
日 に セッ ト し た date の 曜日 を 取り 出し 、「startDay」 に 設定 し て いま す 。 こ れ で 、 
現在 の 月 が 何 曜日 か ら は じ ま っ た か を 取得 する こと が で きる こと に な り ま す 。 
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ョ WI1・ avd 較 


ョ WIL・ 1va 開 


startDay の 場 
所 。 こ の 場合 、 
startDay は 










「4」 が 入る 


2001 年 11 月 


sartDay ま で 
空白 に な る 


6 了 BB lo 
四 芝 =『 居 ] 還 際 也 * 
Ps Io O 凶 陀 皿 - 
了 四 臣 了 本 BOO 


today に は 今日 
の 日 付 が 入っ て 
いる の で 、 赤 色 


後 は 、 表 示す る た め の 記 述 を 行い ます 。 最 初 に 西暦 と 月 を 、 次 に ⑥ の 箇所 で 、 
for 文 を 使っ た ルー プ を 使っ て 曜日 を 表示 し ます 。 

その 後 、startDay の 曜日 まで を 空白 に する た め に 、for 文 を 使っ た ルー プ で 、 
startDay の 保持 し て いる 数 値 ま で 空 の セル (<td>&nbsp:</td>) を 挿入 し ます 。 

ここ まで が 終わ っ た ら 、 実 際 に 日 付 を 表示 し て いき ます 。 1 日 の 1 か ら 
thisMonthDays に 設定 され て いる 数 値 まで 表示 され ます 。 

また 、 横 方 向 に 数 値 ( ま た は 空白 ) が いく つ 並 ん だ か を 数 える 変数 col が 7 回 カウ 
ント し た ら 行 を 替え て 、 新 し い 行 に 日 付 を 表示 し て いき ます (⑦ の 部 分 )。 表示 が 
終わ っ た ら 最 後に テー ブル を 閉じ ます 。 


266 





SUPPORT 





1aoddans 較 


9-1 中 議 癌 1 導い 彰 
項目 が 入力 され て いる か チェ ッ ク を 行う 


イン タラ クティ ブ な Web ペ ー ジ や 、 電 子 商取引 の Web ペ ー ジ で は さま ざま な 
フォ ー ム が 使わ れ ま す 。 こ の フォ ー ム は 、 ユ ー ザ ー が 自由 に 入力 で きた り 、 選 択 
で きる よう に な っ て いる の で 、 ユ ー ザ ー の 入力 ミス 、 ま た は 入力 され な いと いっ 
た こと が よく あり ます 。 こ ん な 場合 に 、 入 力 デ ー タ が サー バー 側 に 送ら れ て か ら 、 
サー バー サイ ド で チェ ッ ク す る シス テム で は 、 パ フォ ー マ ン ス が 悪く な っ て し ま 
いま す 。 そ こ で 、 フ ォ ー ム に 入力 が され て いる か どう か を 、 ク ライ アン ト 側 で 確 
認 で きる よう に し て み ま す 。 






痛 check text - Microsoft Imternet Explorer 


名 前 を 入力 し て くだ さい 
L__ 人 | 





フォ ー ム に 何 も 入力 せ ず に 、 
ここ を クリ ッ ク す る 


強 check text - Microsoft Internet Explorer 


フォ ー ム の 入力 を 確認 する 


名 前 を 入力 し て くだ さい 
ーー 





入力 され て いな い 
場合 の アラ ー ト 
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ヤ 入 力 が ある 場合 の アラ ー ト 


育 check text - Microsoft Imternet Explorer 


: イル) 編集 (ED) 表示 お 気 に 和 AD⑯) ツー ル ① ヘル プ (H 
フォ ー ム の 入力 を 確認 する 


名 前 を 入力 し て < だ さい 
| 


Microsoft Internet Explorer | 放 | 





0 に 0 幸 - コ に : checktext.html 


<htm1> 
<tit1e>check text</t ュ て]e> 
<Script 1anguage="]avascript"> 





く !-- 
function checkText( ){ 
3f(document.myForm.myText.value==""){ ーーーーーー① 
a1ert(" 入 力 が あり ませ ん ") 
} 
else{ 
a1ert(" 入 力 が あり ます "): 


} 
7//--> 
</ Script> 
<body bgco1or="#FfFf8dc"> 
<h3> フ ォ ー ム の 入力 を 確認 する </h3> 
名 前 を 入力 し て くだ さい <br/> 
<hr /> 
<form name="myForm"> 
<1nput name="myText" type="text" size="30" /> 
<input type="button" value=" 確 認 " onc1ick="checkText()" /> 
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Iaoaans 較 


</form> 
</body> 
</htm1> 


D、 5 す 上 A 1 も 5 


この サン プル で は 、Web ペ ー ジ 上 に 配置 され た テキ スト フォ ー ム に 入力 が あ 
る か どう か を 確認 し ます 。 

ユー ザー が [確認 ] ボタン を クリ ッ ク す る と 、onclick イ ベン ト ハ ンド ラ で 指定 
され た checkText 関 数 が 呼び 出さ れ ま す 。checkText 関 数 で は テキ スト フォ ー 
ム に 入力 が あめ る か どう か を 調べ ます 。 こ の と き 、 テ キス ト フ ォ ー ム の 値 に アク セ 
ス す る の に 、 次 の よう に 指定 し て いま す (① の 箇所 )。 


この 記述 は 、 こ の Web ペ ー ジ (document) の 、myForm と 名 付け られ た フ 
ォ ー ム の 、myText と 名 付け られ た フォ ー ム の 要素 の 値 (Value) と いう 意味 で す 。 
これ は フォ ー ム や 、 フ ォ ー ム の 要素 に 、name 属 性 を 用 いて 名 前 が 付け られ て い 
る の で この よう に 指定 する こと が で きま す 。 も し も 、 名 前 が 付い て いな い 場 合 に 
は 、 次 の よう に 指定 する こと が で きま す 。 


これ は 、Web ペ ー ジ (document) 内 の 、 最 初 の フォ ー ム (forms[0]) の 、 最 
初 の 要素 (elements[0]) を 表し ます 。 

この よう に し て 、checkText 関 数 で アク セス し た 値 が 、 空 「""]」 で な いか どう 
か を 確認 し て いま す 。 


9-2 ら 細 選 ら 遼 い 細 


チェ ッ ク ボ ックス フォ ー ム の 状態 を 確認 する 


document . フ ォ ー ム 名 . チ ェ ッ クボ ックス 名 .1ength 





フォ ー ム の 中 で も 、 複 数 の 選択 肢 を 選択 させ る こと が で きる 、 チ ェ ッ クボ ッ ク 
ス フ ォ ー ム の 入力 状態 を 確認 する スク リプ ト で す 。 い くつ の チェ ッ ク ボ ックス に 
チェ ッ ク さ れ 、 選 択 さ れ て いる か を 確認 し ます 。 


和 


民 check form 1 - Netscape 6 同 回 四 
。 ファ イル CE) 編集 CE) 表示 (V) 検索 G⑤) ジャ ンプ G) ブッ クマ ー ク (B) 22① ヘル プ ⑪ 
フォ ー ム の 状態 を 確認 する 





チェ ッ ク さ れ て いな い 
と き の ア ラー ト 





NN check form 1 - Netscape 6 同 回 四 
。 フイ ル (F) 編集 (E) 表示 (V) 検索 ⑤) ジャ ンプ Q⑬) ブッ クマーD(B) 2① へ ルプ ⑪ 
フォ ー ム の 状態 を 確認 する 








2 つ チ ェ ッ ク さ れ て い 
る と き の ア ラー ト 
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人 checkform1_html 


<htm1> 
<tit1e>check form 1</tit1e> 
<scrtpt 1anguage="]avascript"> 
く ! ーー 
function checkForm( ){ 

Var 1。 Count=0: 


for(i=0j <document.myForm.rForm.1ength : i++ ){ 


if(document.myForm.rForm[1] .cChecked==true ){ 
Count++: 
+ 


if(count>0){ の 
aert(count + " つ 選 択 さ れ て いま す 。"): 一 一 ーーーーーーーー③ 

} 

else{ 


alert( "選択 され て いま せん 。"): 


} 

// ェ <> 

</ Script> 

<body bgco1or="#fff8dc"> 
<h3> フ ォ ー ム の 状態 を 確認 する </h3> 
<hr /> 


<form name="myForm"> 


答え 1<input name="rForm" type="checkbox" value="answer1" /> 
<br /> 
答え 2<input name="rForm" type="checkbox" value="answer2" /> 
<br /> 
答え 3<input name="rForm" type="checkbox" value="answer3" /> 
<br /> 
答え 4<input name="rForm" type="checkbox" value="answer4" /> 
<br /> 

</form> 

<hr /> 

<form> 
<input type="button" va1ue=" 確 認 " onc1ick="checkForm()" /> 


</form> 


2 アラ 


</body> 
</ htm1> 


和 


この サン ブル で は 、Web ペ ー ジ 上 に 配置 され て いる 4 つの チェ ッ ク ボ ックス が 
入力 され て いる か どう か を 確認 し て いま す 。 

[ 礎 認 | ボタ ン を クリ ッ ク す る と 、onclick イ ベン ト ハ ンド ラ に 指定 され た 
checkForm 関 数 が 呼び 出さ れ ま す 。checkForm 関 数 で は 、 フ ォ ー ム 内 の 
rForm と 名 付け られ た チェ ッ ク ボ ックス が 、 い くつ チェ ッ ク さ れ た か を 確認 し て 
数 を 返し ます 。 チ ェ ッ クボ ックス の 数 を 確認 する た め に 、length プ ロ パ ティ を 
用 いて 、 次 の よう に 記述 し て いま す 。 


上 上記 の 記述 は 、Web ペ ー ジ (document) の 、myForm と 名 付け られ た フォ 
ー ム の 、rForm と 名 付け られ た チェ ッ ク ボ ックス の 数 (length) と いう 意味 で す 。 
この 数 値 を 用 いて for 文 で ルー プ し 、 そ の 中 で チェ ッ ク ボ ックス を 個別 に 確認 し 
て いき ます 。 ル ー プ は 、 チ ェ ッ クボ ックス の 個数 と 同じ 回 数 だ け 実 行 さ れ ま す 。 

チェ ッ ク ボ ックス の 状態 を 調べ る に は checked プ ロバ ティ を 用 いま す 。 
checked プ ロバ ティ は 、 選 択 さ れ て いる 場合 に は 「true」 が 、 選 択 さ れ て いな い 
場合 に は 「false] が 返さ れ ま す 。 そ の た め 、① の 部 分 で 「true」 の 場合 だ け 、 変 数 
て count に 「1」 を 足し て いき ます 。 

ルー プ が 終了 し た ら 、⑧ の 箇所 で 変数 count を 確認 し ます 。0 よ り 大 きけ れ ば 
チェ ッ ク ボ ックス の どこ か に チェ ッ ク が され て いる と いう こと な の で 、③ の 部 分 
で アラ ー ト を 表示 し ます 。 そ う で な い 場 合 は チェ ッ ク が され て いな い の で 「 選 択 
され て いま せん 。」 と いう 表示 を 行い ます 。 

実際 に この サン ブル を 用 いる 場合 に は 、 ア ラー ト の 表示 を 行っ て いる 部 分 で 何 
ら か の 処理 を 組み 込め ば よい で し ょ う 。 
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9-3 帆 ヽ 敵 山本 昌 1 
オプ ショ ン を 選択 する 


document .optionTarget.elements[1] .checked = 
true | fa1se 


イン ター ネッ ト で さま ざま な も の が 購入 で きる よう に な っ て きま し た 。 し か し 、 
Web ペ ー ジ で 商品 が 選択 し に く か っ た り 、 操 作 が 面倒 だ っ た りす る も の は 敬遠 
され が ち で す 。 そ こ で セッ ト を 組ん で 、 選 択 を 容易 に し て いる 場合 が あり ます 。 
そん な 機能 を スク リプ ト で 実現 する た め の 基 礎 部 分 を 解説 し ます 。 





プア イル E) 編集 EC) 表示 () お 気 に 入 D⑱) ツー ル ① ヘル プ (B 





セッ ト を 選択 する と 、 下 の チェ ッ ク 
ボッ クス に チェ ッ ク が 入る 


O 〇 ぜんぶ セッ ト 











罰 お に く 、 口 お さか な 、 
デザ ー ト 


























午 select_option - Microsoft Imternet Explorer 
ファ イル E) 編集 ) 表示 ) お 気 に 入 D⑯ ツー ル ① ヘル プ 2⑪ 
オプ ショ ン を 選択 する 


〇 お ま か セ ッ ト 


[②③ ちょ いい い め セッ ト セッ ト を 変更 する と 、 下 の 
〇 ぜん ぶ セ ッ ト チェ ッ ク も 変わ る 














お に く 、 口 お さか な 、 加 ソ ー ス 、 
デザ ー ト 


























274 


0 肌 7 隊 3 の は selectform.html 


<htm1> 
<tit1e>select opt1ion</ て ュ t1e> 
<script 1anguage="]avascript"> 
< く !-- 
Var 1, count, option tota] : 
var oarray = new Array( ) 
function checkOption(charSelect){ 
oarray = CharSelect.sp13t( "や )j ーーーーーーーーーーーーーー 一 ②) 
Count = oarray・1ength: 
option_ tota] = document.optionTarget.1ength: 
Tfor(i=0j1<option_tota1 j++){ 一 ーー 一 ーー 一 ーーーーーーー(③) 
回 document.optionTarget.e1ements [1] .checked=fa1se: 
} 
for(1=0j<count i++ ){ 
回 document.optionTarget.el1ements 


回 [oarray[i] ] .checked = truej 一 一 ーーーーーーーー④) 


} 
7/--> 
< く / Script> 


<body bgco1or="#fff8dc"> 
<h3> オ プシ ョ ン を 選択 する </h3> 
<hr /> 





<form name="myForm"> 
<input type="radio" name="select1" value="v1" 
回 onclick="checkOption('0,2,3')" /> お ま か セ ッ ト 
<br /> 
<nput type="radio" name="select1" value="v2" 
回 onc1ick="checkOption( '0,2,3,5')" /> ち ょ いい い め セッ ト 


<br /> 





<input type="radio" name="se1ect1" value="v3" 
回 onc1ick="checkOption( '0,1,2,3,4,5')" /> ぜ ん ぶ セ ッ ト 
<br /> 
</form> 
<hr /> 
<form name="optionTarget"> 


<input nane="opO" type="checkbox"> お に く 、 
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<input nane="op1" type="checkbox"> お さか な 、 
<input nane="op2" type="checkbox"> ソ ー ス 、 
<1nput nane="op3" type="checkbox"> ラ イス 、 
<1input nane="op4" type="checkbox"> ス ー プ 、 
<1nput nane="op5" type="checkbox"> デ ザー ト <br /> 
</form> 

</body> 

</htm1> 


7 


この サン プル は 、 メ ニュ ー と し て 用 意 され た 択 一 選択 フォ ー ム を 指定 する と 、 
下 に 用 意 さ れ て いる 項目 の どれ が 含ま れ て いる か を チェ ッ ク ボ ックス で 表し て く 
れる と いう も の で す 。Web ペ ー ジ 上 に は フォ ー ム が 2 つ 配 置 さ れ て いま す 。 最初 
の フォ ー ム は 択 一 選択 フォ ー ム 、2 つ 目 の フ ォ ー ム は チェ ッ ク ボ ックス で す 。 


講 select_option - Microsoft Internet Explorer 


| アル RCO mW ぉ %cAO ツー ル D へ 209 


オブ ショ ン を 選択 する 


〇 お ま か セ ッ ト 
〇 ちょ いい い ゆ の セッ ト 
〇 ぜん ぷ ぶ セ ッ ト 

















フォ ー ム 名 : optionTarget 
フォ ー ム 内 で の 要素 番号 


動作 と し て は 、1 つ 目 の フ ォ ー ム の 選択 肢 を クリ ッ ク す る と 、 下 の チェ ッ ク ボ 
ックス に チェ ッ ク が 行わ れる と いう も の で す 。 こ の チェ ッ ク の 部 分 は 
checkOption 関 数 に 実装 され て いま す 。 

この 関数 の 呼び 出し は 、1 つ 目 の フ ォ ー ム 内 の 各 ラ ジオ ボタ ン に 対し て 設定 さ 
れ て いる onclick イ ベン ト ハ ンド ラ で 行い ます (① の 箇所 )。checkOption 関 数 
は 引数 と し て 、optionTarget フ ォ ー ム の どの 要素 を チェ ッ ク す る か と いう 番号 
を カン マ 区 切り し た も の を 取り ます 。 
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2 2 


オプ ショ ン の 総数 を 確認 
引数 を "" で 分 割 し 、 


現在 の チェ ッ ク ボ ックス を 
な クリ 


引数 内 の 数 字 の 


oarray 配 列 に 入っ て いる 
番号 の 要素 の チェ ッ ク 


checkOption 関 数 


checkOption 関 数 で は 、 ま ず 引 数 と し て 受け 取っ た 数 列 ( 変 数 charSelect に 
格納 され て いる ) を 分 解す る 処理 を 行い ます 。split メ ソ ッ ド を 用 いて 、「,」 を 分 割 
記号 と し て 処理 を 行い 、 分 解 し た 結果 は 配列 oarray で 受け 取り ます (② の 箇所 )。 
この 後 、 配 列 oarray の 要素 の 数 と 、optionTarget フ ォ ー ム 内 の 要素 の 数 を 、 
length プ ロ パ ティ を 用 いて 取得 し ます 。 

取得 し た optionTarget フ ォ ー ム 内 の 要素 の 数 を 用 いて 、 フ ォ ー ム 内 の チェ ッ 
クボ ックス フォ ー ム の チェ ッ ク を すべ て クリ ア し ます (③ の 箇所 )。 

最後 に 、 配 列 oarray に 入っ て いる 数 に 対応 する optionTarget フ ォ ー ム の 要 
素 に チェ ッ ク を 付け て いき ます 。 こ の と き 、 配 列 oarray の 要素 の 中 に は チェ ッ 
ク を 付け た い optionTarget フ ォ ー ム の 要素 の 番号 が 入っ て いる の で 、④ の 箇所 
の よう な 記述 に な り ま す 。 こ の 部 分 で 注目 する の は oarray[i] で す 。 


oarray [1] 


この よう に 配列 と for 文 を うま く 使う こと で 、 簡 便 に 記述 で きま す 。 
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9-4 員 い 彰 着い 陣 


文字 列 を 確認 する 1 (数 字 ) 


isNaN( 値 ) 





これ は フォ ー ム で 入力 され た 値 が 、 数 値 か どう か チェ ッ ク す る スク リプ ト で す 。 
CGI な ど で よ く 年 齢 や 年 月 日 を 入力 する 場合 が あり ます 。 そ ん な と き に 入力 され 
た 値 が 数 値 か どう か を 、 サ ー バ ー へ 送信 する 前 に チェ ッ ク で きれ ば 、 ト ラフ ィ ッ 
ク を 減ら せる と と も に 反応 を よく する こと が で きま す 。 


プア イル (E) 編集 CE) 表示 ) お 気に入り ⑱) ツー ル ① ヘル ナ 


数 字 で 入力 し て くだ さい 。 
生年 月 日 : 回 語 年 | 月 日 





数 字 以 外 を 入力 する と …・ 


ま 









筆 入力 チェ ッ ク ( 圭 値 ) - Microsoft mternet Explorer 同 回 四 
: イル 編集 ) 表示 お 気 に AD⑱ ツ - ル ①D AM2⑪ 箸 


数 値 の 確認 



















数 字 で 入力 し て くだ さい 。 


Microsoft Imternet Explorer | 区 | 


| 人 eve ぁ pa な 


アラ ー ト が 
表示 され る 
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eS 有 checknumber.html 


<htm1> 
<tit1e> 入 力 チェ ッ ク ( 数 値 )</tit1e> 
<Script 1anguage= "avascript"> 
く !-- 
Tunction 3sNumeric(3va1ue ){ ーーーーーーー(①) 
if(isNaN( iva1ue ) ) 
al1ert( "数 値 で は あり ませ ん 。"): 





} 
7/- -> 
< く / Script> 
<body bgco1or="#fff8dc"> 
<h3> 数 値 の 確認 </h3> 
<hr /> 
数 字 で 入力 し て くだ さい 。<br /> 
<form> 
生年 月 日 : 
<1nput type="text" onchange="1sNumeric(this .value)" 
回 size="4" /> 年 
<1nput type="text" onchange="1sNumeric(this .value)" 
回 size="4" /> 月 
<1nput type="text" onchange="1sNumeric(this .value)" 
回 size="4" /> 日 
</from> 
</body> 
</htm1> 


EE 人 い I ES 


値 が 数 値 か どう か を チェ ッ ク す る に は isNaN 関 数 を 使い ます 。 書 式 と し て は 以 
下 の よ うに な り ま す 。 


isNaN( 値 ) 


isNaN 関 数 は 、 値 が 文字 列 だ と 「true」、 数 字 だ け だ と 「false」 を 返し ます 。 数 
字 か どう か を 調べ る な ら ば 、 値 が 数 字 の と き に 「true」 を 返す の が 普通 か と 思わ れ 
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ます が 、 こ れ は 逆 に な っ て いま す 。NaN と は 「Not a Number」( 数 字 で な い ) 
いう 選 ど で す 。 

な ぜ こ の よう な 仕様 に な っ て いる か と いう と 、 数 字 か どう か を 調べ る と いう こ 
と は 、 つ まり 数 字 な ら ば 何 も し な いで よい と いう こと だ か ら で す 。 そ の た め i 文 
な ど と 組み 合わ せ て 使う こと き に は 、 こ の よう に 逆 に な っ て いる ほう が 都合 が よい 
の で す 。 

今回 の スク リプ ト で は 、 数 字 か どう か を 調べ る 部 分 を 関数 と し て 使っ て いま す 。 
こう すれ ば 、 複 数 の 入力 項目 が あっ て も それ ぞ れ の 場所 に チェ ッ ク す る コー ド を 
実装 し な く て すみ 、 コ ー ド を 簡単 に ける こと が で きま す 。 

今回 作成 し た isNumeric 関 数 で は 、 引 数 を 変数 「ivalue」 で 受け 取り 、 そ れ が 
数 値 で な いな ら ば アラ ー ト を 出す よう に し て いま す (① の 箇所 )。 ま た 、②⑧ の 部 分 
の フォ ー ム の 入力 部 に は 、<input> タ グ の onchange イ ベン ト ハ ンド ラ に より 、 
値 が 入力 され た と き に isNumeric 関 数 を 呼び 出す よう に し て いま す 。 そ し て 、 
isNumeric 関 数 へ 渡す 値 は 、 次 の よう な 記述 に な っ て いま す 。 


これ は this オ ブ ジ ェクト の 値 を 渡す と いう 意味 で す が 、this オ ブ ジ ェクト は 自 
分 自身 、 要 する に <input> 要 素 そ の も の を 指し て いま す 。 こ れ で それ ぞ れ の 入力 
部 に 値 が 入力 され た と き に isNumeric 関 数 が 呼び 出さ れ 、 入 力 さ れ た 値 の チェ 
ッ ク を 行う こと が で きま す 。 
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に 概 、 般 ド 彰 邊 日 


文字 列 を 確認 する 2 (特殊 記号 ) 
BN 


String オ ブ ジ ェクト .match( / [検索 文字 ] / ) 





ユー ザー に 入力 を 促す Web ペ ー ジ が 結構 多い と 思い ませ ん か ? た と えば 、 
イン ター ネッ ト 上 で 買い 物 を し よう と 思っ た ら 、 多 く の 情 報 を た 入力 し な く て は な 
り ま せん 。 そ ん な Web ペ ー ジ を 作る 側 に と っ て は 、 入 力 し て も ら っ た 情報 が 間 
違っ て いて は 困っ て し まい ます 。 こ うい っ た こと を 防ぐ に は 、 入 力 さ れ た 文字 を 
チェ ッ ク す る 処理 を 行い ます 。 

ここ で は 、 特 殊 記号 が 使わ れ て いる か どう か を 、 メ ー ル アド レス に 不適 切な 文 
字 列 が 入力 され た か どう か を 判別 する 例 で 解説 し て み ま す 。 


人 


ck char1 - Netscape 6 


記号 の 入っ た 間違っ た メー ル ア ド レス を 入力 
し て 、 こ こ を クリ ッ ク す る と ・…・ 


N check char1 - Netscape 6 回 回 


> アイ ル で ) 編集 (上 表示 (⑦ 検索 ⑤ ジャ ンプ ⑬⑯) ブッ クマ ー の ⑧) 22 が ① へ ルプ ⑪ 
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の 
思 
で 
で 
〇 
つづ 
本 | 


人 論 : 衣 間 雪 層 checkchar1.html 


<htm1> 
<tit]e>check char1</t ュ t1e> 
<Script 1anguage="]avascr1Pt"> 
< く !-- 
function chackA11( ){ 
ェ f(checkEmai1(document.myForm.emai1 . va1ue ) ==fa]1 se ){ 
alert(" メ ー ル アド レス が 正しく あり ませ ん "): 


function checkEmai1(strTarget){ 
if( strTarget.1ength == O ){ 
return fa]se: 


} 


if(strTarget.match 
回 (/[ 昌 絞 %"\(\)=M\|,^\[\]\(\)*?+><]/ ) ){ 一 一 ーーーーーー④ 
return falsei 
} 
else{ 


return truej 


} 

が ミッ 

</ scr1ipt> 

<body bgco1or="#fff8dc"> 

<h3> メ ー ル アド レス チェ ッ ク (match)</h3> 

<hr /> 

<form name="myForm"> 

emai]1: <1nput type="text" name="ema11" size="30"./><br /> 
<hr /> 

<input type="button" value=" 確 認 する " 


回 onc1ick="chackA11()" /> 
0 ニー ーーーー! 


</ 和 form> 





</body> 
</htm1> 
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この サン ブル で は 、 入 力 さ れ た メー ル ア ド レス に 、 メ ー ル アド レス と し て 不適 
切な 文字 が 入っ て いな いか どう か 確認 する も の で す 。 通常 メー ル ア ド レス に は 、 
半角 英 数 文字 と 「@」( ア ッ ト マ ー ク )、「-」( ハ イフ ン )、「_」( ア ンダ ー ス コア )、「.」 
(ピリ オド ) が 用 いら れ て いま す 。 逆 に いう と 、 こ れ ら 以外 の 文字 が 入っ て いる 場 
合 に は 、 メ ー ル アド レス が 間違っ て いる 可能 性 が あり ます 。 こ れ を 検出 する に は 
さま ざま か な 方法 が あり ます が 、 こ こ で は 正規 表現 を 用 いて 検出 を 行っ て いま す 。 

スク リプ ト の 動作 と し て は 、 か な り シ ンプ ル に で き て いま す 。 テ キス ト フ ォ ー 
ム に 入力 され た メー ル ア ド レス に 対し て 、 確認 もち ボタ ン を クリ ッ ク し て チ 
ェ ッ ク を 行い ます 。 









確認 ボタ ン を クリ ッ ク 


checkEmail 関 数 を 呼び 出し 


空 で な いか チェ ッ ク 


不正 な 文字 が 入っ て いな いか 


checkEmail 関 数 の 戻り 値 が 
と に 


実装 と し て は 、 確認 すぅ ボタ ン が クリ ッ ク さ れ た と ころ で 、checkAlI 関 数 
を 呼び 出し て いま す (① の 箇所 )。 さ ら に 、 こ の checkAll 関 数 内 で 、 フ ォ ー ム に 
入力 され た 値 を 引数 に し て 、checkEmail 関 数 を 呼び 出し て いま す (②⑧ の 箇所 )。 
そし て checkAll 関 数 で 、checkEmail 関 数 の 戻り 値 に より エラ ー 処 理 を 行う か 
どう か を 判断 し ます 。 

checkEmail 関 数 で は 、 ま ず 引 数 と し て 渡さ れ て きた 文字 列 が 格納 され て いる 
変数 strTarget が 空 で な いか どう か チェ ッ ク し ます (③ の 箇所 )。 空 の 場合 に は 
false を 戻り 値 と し て 返し ます 。 空 で な い 場 合 に は 、 変 数 strTarget の 中 に 次 の 
文字 が な いか どう か 確認 し ます 。 
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確認 する 方 法 と し て は 、indexOf メ ソ ッ ド を 用 いた 方 法 が 考え られ ます が 、 こ 
の スク リプ ト で は 、 正規 表現 を 用 いた 検索 を 行う こと が で きる match メ ソ ッ ド を 
使っ て いま す 。match メ ソ ッ ド は 、 以 下 の よ うな 書式 と な り ま す 。 


String オ ブ ジ ェクト .match( 正 規 表現 ) 


ここ で は 上 記 の 使っ て は いけ な い 文字 の どれ か に マッ チ し た ら 真 と な る よう に 
する の で 、 次 の 正規 表現 を 用 いま す 。 


/ [検索 文字 ]/ 


この よう に 記述 する と 、 検 索 文字 の うち どれ か に マッ チ す る と 真 と な り ま す 。 
実際 の 記述 と し て は 、④⑭ の 部 分 の よう に な り ま す 。 こ こ で 「\」 が 多く 使わ れ て い 
る の に 気付 か れ た 方 が いる か と 思い ます 。(、)、[、]、{、}、 \ の 7 つ は 、 正規 表現 
の 中 で 意味 を 持っ て いる の で 、 それ ぞ れ に 「\」 を 前 に 付け て 、 「\(」、 「\)」、 「\[、 
「\]」、「\ 介 、「\})」、「\\] と する こと に より 、 単 な る 文字 列 と し て 見 る よう に 指 
定 し て いま す 。 

ここ で 、 使 っ て は いけ な い 文 字 と マッ チ し た ら 、checkAll 関 数 に 「false」 を 戻 
り 値 と し て 渡す よう に し て いま す 。 検出 され な い 場 合 は 「true」 が 返 よ れ ま す 。 
checkAll 関 数 で は 、checkEmail 関 数 の 戻り 値 が false の 場合 に は 、「 メ ー ル ア 
ドレ ス が 正しく あり ませ ん 」 と いう アラ ー ト を 表示 し ます 。 

と ころ で 、 こ の スク リプ ト で は checkAlI 関 数 と checkEmail 関 数 と いう よう 
に 、2 つ の 関数 に 分 け て 実装 し て いま す 。 こ れ は Web 上 の 登録 ペー ジ に お いて 、 
メー ル ア ド レス を 入力 し て も ら う フォ ー ム が 1 つ し か な いわ け で は な く 、 複 数 の 
メー ル ア ド レス を 登録 し て も ら う 場 合 が ある こと を 考慮 し て いる か ら で す 。 この 
スク リプ ト の よう に し て お く と 、checkEmail 関 数 は 汎用 的 に 使え る こと に な り 
ます 。 

な お 、 こ の スク リプ ト で は 不正 な 文字 の 検出 し か 行っ て いま せん 。 メ ー ル アド 
レス を きち ん と チェ ッ ク す る 場合 は 、 さ ら に 「@」 や スペ ー ス の 有無 と いっ た 検出 
も 組み 合わ せ て 使う 必要 が あり ます 。 
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9-6 ら 楓 障 重い 随 
文字 列 を 確認 する 3 (半角 アル ファ ベッ ト ) 


置換 後 文字 列 = String オ ブ ジ ェクト .rep1ace( 正 規 表現 , "置換 文字 列 " ) 


位置 = 検索 対象 文字 列 .1ndexOf( "検索 文字 " , 開始 位置 ) 





「9-5 文字 列 を 確認 する 2 (特殊 記号 )] で は 、 メ ー ル アド レス に 使っ て は いけ 
な い 文字 (特殊 記号 ) が 入っ て いな いか どう か 確認 する サン ブル を 紹介 し まし た 。 
今度 は 、 半 角 ア ルフ ァ ベ ッ ト で 入力 し な く て は な ら な い 部 分 に 、 そ れ 以 外 の 文字 
が 入っ て いな いか どう か を 確認 する スク リプ ト で す 。 

半角 アル ファ ベッ ト で の 名 前 の 入力 、 希 望 ロ グイ ン 名 の 入力 チェ ッ ク な ど に 使 
うこ と が で きま す 。 


IP 肖 0Y 


文字 列 を チェ ッ ク す る (ロー マ 字 ) 


NamelMiASAKA MASATERU  【 半 角 ア ルフ ァ ベ ッ ト ) 





全角 アル ファ ベッ ト で 入力 し て 、 
ここ を クリ ッ ク す る 


筆 check char2 - Microsoft Imternet Explorer 


NameiMIYASAKA MASATERU (半角 アル ファ ベッ ト )〉 





竹 認 する 
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iaoaans 較 


0 組 。 全 人 : 生 checkchar2.html 


<htm1> 
<tit1e>check char2</ て i ト 1e> 
<Scr1pt 1anguage="]avascr1pt"> 
く !-- 
function checkA11( ){ 
if(checkRoman(document.myForm.strRoman . value ) == fa1se){ーー① 
document.myForm.strRoman . 和 focus( ) : 
document.myForm. strRoman.select( ) ーーーーー テ ーーーーー⑤ 
alert( "Name が 正しく あり ませ ん "): 
return 和 fa]sej 
} 
elseftalert("OK"):+ 


Tunction checkRoman(strTarget){ 

var 1, transTarget: 

var checkStr = new String( "ABCDEFGHTJKLMNOPORSTUVW 
回 XYZabcdefghijk1mnopqrstuvwxyz"): 


transTarget = strTarget.rep1ace(/ /g, ""): ーーーーーーー-③) 


if(transTarget.1ength==0){ 





return fa]se: 
} 
for(1=0ji<transTarget.1ength i++){ 
if(checkStr.indexOf(transTarget.charAt(i) ,0)==-1){ 
return Ta]se: 


} 


return truej 
} 
7/--> 
</ script> 
<body bgco1or="#Fff8dc"> 
<h3> 文 字 列 を チェ ッ ク す る (ロー マ 字 )</h3> 
<hr /> 
<form name="myForm"> 
Name :<input name="strRoman" type="text" size="40" />( 半 角 ア ル 
回 ファ ベッ ト )<br /> 
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<hr /> 
<1nput type="button" Va1ue=" 確 認 する " onc1ick="checkA11()" /> 
</form> 
</body> 
</ htm1> 


この サン ブル で は 、 入 力 さ れ た 項目 が 半角 アル ファ ベッ ト の み で ある か どう か 
確認 し ます 。 Web ペ ー ジ 上 に は ロー マ 字 で 氏名 を 入力 する テキ スト フォ ー ム と 、 
「 確 認 する 」 と 表示 され た ボタ ン が 配置 され て いま す 。 テ キス ト フ ォ ー ム に 入力 を 
行い 、 確認 す ち を クリ ッ ク す る と 、checkAll 関 数 が 呼び 出さ れ ま す 。 


、 確認 ボタ ン を クリ ッ ク す る 











ーー ーッ ーーーーーー マ ーーーーー ィ ーーーーー checkAll 関 数 
checkAll 関 数 を 呼び 出す 


checkRoman 関 数 を 呼び 出す 。 8 





。 空 で な いか 確認 
入力 され た 文字 を 1 文字 取り 出す 


取り 出し た 文字 が アル ファ ベッ ト 
か どう か 確認 





戻り 値 が false の 場合 エラ ー 処 理 | 
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1aoaans 識 


checkAll 関 数 で は 、① の 部 分 で checkRoman 関 数 を 呼び 出し て いま す 。 文 
に 囲ま れ て いる の は 、checkRoman 関 数 の 戻り 値 に より 処理 を 変え る た めで す 。 
checkRoman 関 数 で は 、② の と ころ で 半角 アル ファ ベッ ト を 定義 し て いま す 。 
ここ で 定義 し た 文字 列 と 入力 され た 文字 列 を 比較 し 、 入 力 さ れ た 文字 が 定義 され 
た 文字 列 の 中 に ある か どう か 確認 し て いき ます 。 

ここ で の ポイ ント は 、 確 認 す る 前 に 、 入 力 さ れ た 文字 列 か ら ス ペー ス を 取り 去 
る こと で す 。 こ れ は 、 ス ペー ス だ け を 入力 され た と き は 、 文字 列 は 空 で ある と 認 
識 さ せる 必要 が ある た めで す 。 ス ペー ス は 目 に は 見 えま せん が 、 文 字 と し て 数 え 
られ ます 。 そ の た め 、 空 文字 を 検出 し て も 、length プ ロ パ ティ を 使っ て も 、 ス 
ペー ス と 文字 の 区 別 は 付か な い の で す 。 ス ペー ス を 取り 去る に は 、replace メ ソ 
ッ ド を 用 いま す 。 こ の メソ ッ ド は 、 正 規 表 現に し た が っ て 文字 を 置換 し ます 。 書 
式 は 以下 の よう に な り ま す 。 


置換 後 文字 列 = String オ ブ ジ ェクト ・.rep1ace( 正 規 表現 , "置換 文字 列 " ) 


サン ブル で は 半角 スペ ー ス を すべ て 置換 する の で 、③ の 部 分 の 記述 と な っ て い 
ます 。 置 換 文字 列 が 「" "]」 に な っ て いる の は 、「 取 り 去 る ] と いう 意味 で す 。 ス ペー 
ス が 取り 除 か れ た 文字 列 を 、 変 数 transTarget に 格納 し て いま す 。 

この 後 、④ の 箇所 の よう に length プ ロバ パテ ィ を 使っ て 、 文 字 列 の 長 さ を 調べ 
ます 。「0」 の 場合 に は 、 入 力 さ れ て いな か っ た か 、 ス ペー ス の みか 入力 され て い 
た と 考え られ る の で 、「false」 を 返し ます 。 


transTarget.length 回 繰り 返す 
(この 場合 は 8 回 ) 
1 に ニー デー ニー ニー ニー ニー > 


に 0 =2 


transTarget m i ya s ak ョ | 
(入力 され た 文字 ) 


11 文 字 取 り 出 し て checkStr 対 | 
に 対し て 検索 を か ける 


4 
/ Se ー 致 
2 比較 / Me 8 (この 場合 50 を 返す ) 





と こき 
AB( 1 DE y wx y z| 


3 一 致し た ら checkStr の 先頭 か ら の 位置 を 返す 。 
返る 値 が "-1" で な けれ ば i を 増やし て 次 の 文字 に 
対し て 同様 の こと を 行う 
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文字 の 長 さ を 調べ た 後 は 、 入 力 さ れ て いる 文字 列 を 調べ て いき ます 。 入力 し た 
文字 列 を 1 文字 ずつ 先頭 か ら 切 り 出 し 、 そ の 文字 が ⑧ の 部 分 で 定義 し た 、 変 数 
checkStr の 中 に 存在 する か どう か を indexOf メ ソ ッ ド を 使っ て 調べ ます 。 
indexOf メ ソ ッ ド は 、 以 下 の よ うな 書式 に な り ま す 。 


検出 位置 = 検索 対象 文字 列 .1ndexOf( "検索 文字 ", 開始 位置 ) 


検索 対象 文字 列 に 検索 文字 が な か っ た 場合 に は 、「-1」 が 返さ れ ま す 。 その た め 、 
変数 transTarget が アル ファ ベッ ト 以 外 だ っ た 場合 は 「-1」 が 返り 、checkAll 関 
数 に 「false] が 返り ます 。 す べ て の 文字 を 同じ よう に 確認 し て 、 確 認 が 終了 し た 
易 合 に は 、checkAlI 関 数 に true が 返り ます 。 

checkRoman 関 数 か ら 戻 り 値 が 返っ て きた ら 、 値 に よっ て checkAll 関 数 で 処 
理 を 行い ます (⑤ の 箇所 )。false の 場合 に は 、 フ ォ ー カ ス を ロー マ 字 の 氏名 を 入 
力 す る フォ ー ム に 戻し 、 再 度 入力 し や すく する た め に select メ ソ ッ ド を 用 いて 選 
択 を し ます 。 さら に アラ ー ト を 表示 し 、 再 入力 を 促し ます 。 

すでに 述べ た の で す が 、checkAII 関 数 と checkRoman 関 数 が 分 離さ れ て いる 
の は 、checkRoman 関 数 を 汎用 的 に し 、 さ ま ざ ま な フォ ー ム 入 力 に 対し て 確認 
の た め に 呼び 出す こと が で きる よう に する た めで す 。 


T I 詳 ト 


通常 この よう な 文字 列 の チェ ッ ク 処 理 は 、 ユ ー ザ ー に 何ら か の 入力 を 行っ て も 
ら っ た 後に 行い ます 。 そ の た め 、 こ うい っ た 処理 は フォ ー ム の 「submit」 ボ タン 
が クリ ッ ク さ れ た と き に 実行 され る こと が 多い と 思わ れ ま す 。 

「submit」l ボ タン を 用 いた 場合 に は 、P.325 の 処理 と 同様 に 、<form> 要 素 の 
onclick イ ベン ト ハ ンド ラ の 呼び 出し に 「return] を 用 いて 、 呼 び 出し た 関数 内 で 
エラ ー 処 理 を 行っ て くだ さい 。 

「submit」 ボ タン を 用 いな い 場 合 に は 、 正 常に 終了 し た と き に 、 フ ォ ー ム の 内 
容 を 送信 する よう に スク リプ ト を 記述 し ます 。 フ ォ ー ム の 内 容 を 送信 する に は 
submit メ ソ ッ ド を 用 いま す 。 こ こ で の スク リプ ト で は 、 以 下 の よ うな 記述 で 送 
信 を する こと が で きま す 。 
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Laoaans 較 





融 い 費 引い 背 


文字 列 を 確認 する 4 (全角 ひら が な ) 
置換 後 文字 列 = String オ ブ ジ ェクト .rep1ace( 正 規 表現 , "置換 文字 " ) 
位置 = 検索 対象 文字 列 .1ndexOf( "検索 文字 ", 開始 位置 ) 











ここ まで に 、 特 殊 文字 の 検出 と 半角 アル ファ ベッ ト の 確認 は 解説 し まし た 。 今 
度 は 、 日 本 語 の 文字 列 に つい て 確認 し ます 。Web ペ ー ジ で 名 前 を 登録 させ る 場 
合 が あり ます 。 そ ん な と き に は 、 通 常 、 漢 字 と ひら が な 、 漢 字 と カタ カナ で 登録 
させ る こと が 多い よう で す 。 こ こ で は 、 フ ォ ー ム に 入力 され た 文字 列 が ひら が な 
だ け か どう か を 確認 する サン プル を 紹介 し ます 。 


強 check char3 - Microsoft Internet Explorer 


プイ ル (E) 編集 (E) 表示 ) お 気 に 和 0⑱) ツー ル ① ヘル プ ⑪ 





文字 列 を チェ ッ ク す る (ひら が な ) 


ぶり が な < 姓 ) あ かさ か (名 》n ウ ひらがな) 


フォ ー ム に 入力 し て 、 


ここ を クリ ッ ク す る 


iaoaans 較 





Microsoft Imternet Explorer || 


= 及 い 05 が な 名 が 正しく あり ませ ん 


Microsoft Internet Explorer | 


! ヽ 姓 OK 






姓 の 部 分 が OK と いう 次 に チェ ッ ク し た 名 は 、 
アラ ー ド ひら が な で は な いと 表示 
され る 
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0 checkchar3.html 


<htm1> 

<tit1e>check char3</t ュ 1e> 

<script 1anguage="]avascript"> 

く !-- 

functton checkA11(){ ーーーーーーーーーーーーーーーーーーーーー⑮⑬ 
if(checkHiragana(document .myForm.strHiragana_sei. 

回 value ) == fa1se){ 


document.myForm. strHiragana se . 和 focus( ) : 





document.myForm.strHiragana_sei.select( ) : 
al1ert( "ひらがな 姓 が 正しく あり ませ ん "): 
return 和 false: 
} 
el1setalert(" 姓 OK"):} 
if(checkHiragana(document .myForm.strHiragana_na.Va1ue ) == 
回 fa1se){ 
document.myForm .strHiragana_na.Tocus( ) 
document .myForm.strHiragana_na.Select( ) : 
al1ert( "ひらがな 名 が 正しく あり ませ ん "): 
return falsei 
} 
elsetalert(" 名 OK")j} 


function checkHiragana( strTarget ){ 
var 1, transTarget, char 1ength: 
var checkStr = new String(" あ あい いう う ぇ ええ ぉ お か が き ぎ 


回 く ぐ け げ こ ご さ ざ し じす ず せ ぜ そ ぞ た だ ち ぢ っ つづ て で と ど 
に な に ぬ ね の は ば ば ひび ぴ ふ ぶ ぷ へ べ ペ ほぼ ぼ ま み む めも ゃ や 
回 ゆ ゅ 人 ゆ ょ よら り る れろ わ ゎ わ ゐ 色 を ん ?~ ” ゝ マーー・")j 





var char lengthi= ( あ ".1ength): ニ ーーーーー ニ ーーー ニー ニテ ーー⑨ 


transTarget = strTarget.repl1ace(/[  ]/g, ""), ーーーーーーー③ 
if(transTarget.1ength==O){ 


return fa1se: 

也 

for(i=0j1<transTarget.1engthji=+char 1ength){ ーーーーーーー④ 
if(checkStr . ndexOf(transTarget.charAt(1 ) , 0) ==-1 ){ 
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return falsej 


+ 
return て rue: 
+ 
7/==> 
</ Script> 
<body bgco1or="#fff8dc"> 
<h3> 文 字 列 を チェ ッ ク す る (ひら が な )</h3> 
<hr /> 
<form name="myForm"> 
ふり が な :( 姓 )<input name="strHiragana_se1" type="text" 
回 size="20" /> 
(名 )<input name="strHiragana_na" type="text" size="20" /> 
回 (ひら が な )<br /> 
<hr /> 
<input type="button" value=" 確 認 する " onc1ick="checkA11( )" 
</form> に 


に SS 


> 


</body> 
</htm1> 


本 王 間 7 克 ) ま - 


この サン プル で は 、Web ペ ー ジ 上 に 姓 、 名 を 入力 する テキ スト フォ ー ム と 、 
確認 ボタ ン が 配置 され て いま す 。 こ の 確認 すぅ | ボタ ン を クリ ッ ク す る と 、 テ キ 
スト フォ ー ム に 入力 され た 文字 列 が ひら が な か どう か を チェ ッ ク し ます 。 

実は に の サン ブル は 、「9-6 文字 列 を 確認 する 3( 半 角 ア ルフ ァ ベ ッ ト )」 の 半 
角 ア ルフ ァ ベ ッ ト の チェ ッ ク と 基本 的 な 構造 は 同じ で す 。 異 な る の は 、 チ ェ ッ ク 
する 入力 項目 が 複数 に な っ た た め 、① の 箇所 の checkAll 関 数 内 部 で 、 
checkHiragana 関 数 を 呼 上 回 数 が 複数 回 に な っ て いる 点 と 、checkHiragana 
関数 の 中 で 、 日 本 語 を 扱う に あたっ て いく つつ か 変更 を 加え て いる 点 だ け で す 。 

checkAll 関 数 内 で は 、 今回 は 、 2 回 CheckHiragana 関 数 を 呼び 出し て いま す 。 
最初 に 「 姓 ] の チェ ッ ク が 行わ れ 、 次 に 「 名 ] の チェ ッ ク が 行わ れ ま す 。 も し も 「 姓 」 
の チェ ッ ク で 失敗 する と 、「 名 ]」 の チェ ッ ク は 行わ れず に 「 姓 ] の エラ ー 処 理 が 行わ 
れ て checkAII 関 数 が 終了 し ます 。「 姓 ] の チェ ッ ク が 終了 する と 、「 名 ] の チェ ッ 
ク が 行わ れ ま す 。 

checkHiragana 関 数 で は 、 確 認 に 使う 文字 列 が ひら が な (あー ん 一 ・) に な っ 
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SECTION 9-7 を 文字 列 を 確認 する 4 (全角 ひら が な ) 


て いま す 。 こ の ひら が な を すべ て 書き 出し た も の が 、 変 数 checkStr に 格納 され 
ます (⑧ の 箇所 )。 さ ら に 、③ の 部 分 で ひら が な 「 あ 」 の 文字 の 長 さ を 確認 し 、 変 数 
char_length に 格納 し て いま す 。 こ れ は Web ブ ラウ ザ に よっ て 全角 の 長 さ が 異 
な る 可能 性 が ある た めで す 。 現在 の IE4 以 降 や NN4.06 以 降 な ら ば 、 全 角 は 1 文字 
と し て カウ ント され ます が 、 そ れ 以 外 の Web ブ ラウ ザ で は 2 文字 と カウ ント され 
る 場合 が あり ます 。 こ れ に 伴い 、④ の 部 分 の for 文 の 変数 i の 制御 が 、 単 純 に 「1] 
を 足す だ け で な く 、 変 数 char_length を 足し て いく よう に 変更 し て いま す 。 

も う 1 箇 所 、 日 本 語 を 扱う に あたっ て の 変更 が 加え られ て いま す 。 紙面 で は わ 
か り に くい か も し れ ま せん が 、⑤ の 箇所 で 行っ て いる 、 ス ペー ス を 取り 除く 処理 
に お いて 、 全 角 ス ペー ス も 取り 除 か れる よう に し て いま す 。 


transmarget = gtrmarget.replace(/[ ]/g, ""): 


正規 表現 に お いて 、[ は その 内 部 に 記述 され て いる 文字 の いずれ か と マッ チ し 
た 文字 と いう 意味 に な り ま す 。 そ の た め 、 こ の 上 [の 中 に は 半角 スペ ー ス と 全角 ス 
ペー ス が 入力 され て いま す 。 

この サン ブル の 変数 checkStr に 設定 し て いる 文字 を カタ カナ に 変更 する だ け 
で 、 カ タカ ナチ ェ ッ ク に も 用 いる こと が で きま す 。 


コン ピュ ー タ が 扱う 情報 の 中 で も 、 日 本 語 の 処理 は 面倒 な ぶ も の で す 。 コ ン 
ピュ ー タ で 文字 を 扱う 場合 に は 、 文 字 コ ゴー ド に する 必要 が あり 、 日 本 語 を 扱 
う 文 字 コ ー ド に は Shift-JIS、JIS、EUC、 そ し て Unicode が あり ます 。 

それ ぞ れ の 文字 コー ド に は 一 長 一 知 が あり ます が 、 イ ンタ ーネット の 世界 
に お いて は 、 ど う や ら Unicode が 標準 に な り そ う で す 。 そ の 理由 の 1 つ は 、 
XML(eXtensible Markup Language) で Unicode が 推奨 され て いる た 
めで す 。 XML は 電子 商取引 や 電子 申請 に は 必須 と な っ て いま す 。 また 、 これ 
か ら は Web サ ービス の プロ トコ ル と な る で あろ う SOAP や XML Scheme 
な ども Unicode が 主 に 使わ れる た め 、 さ ら に 普及 する こと で し ょ う 。 

また 、Unicode は Java で 採用 され 、 さ ら に Windows XP/2000/NT の 
内 部 コー ド も 、Unicode で 処理 され て いま す 。 

この よう に 、Unicode は さま ざま な 分 野 で 広く 使わ れ て いま す 。 
Unicode の 情報 は 、 次 の URL を 参照 し こく だ さい 。 


URL 了 mnttpz7/www』unioode』org/ 
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9-8 っ 隊 い 隅 還 


文字 列 を 確認 する 5 (全角 文字 ) 
if (( 比 較 す る 文字 >= "!" 88& 比較 する 文字 <= "-")| 
(比較 する 文字 >= "。" 88 比較 する 文字 <= "“")) 


I 
の 

















Web ペ ー ジ で さま ざま な 項目 を 登録 する 際 に 、 一 番 多い の は 日 本 語 の 入力 で 
し ょ う 。 皆 さん も 名 前 、 住 所 、 会 社名 な ど を 入力 し た こと が ある の で は な いで し 
よう か ? フォ ー ム に よっ て は 、 全 角 で 入力 を 指示 し て いる 場合 が あり ます 。 そ 
ん な と き に 、 全 角 か どう か を チェ ッ ク す る サン ブル を 解説 し ます 





し 貢 問 曳 補っ 尊 。 


Ni Check char4 - Netscape 6 
。 フイ ル (F) 編集 E) 表示 検索 G) サ ャ ンプ (G) ブッ クマ ー の (B) 2 が CD ヘル プ (ゆい 


文字 列 を チェ ッ ク す る (全角 ) 





氏名 95 ロ 9 (全角 文字 ) 





半角 の カタ カナ で 入力 し て 、 
ここ を クリ ッ ク す る と ・…・ レシ 


N Check char4 - Netscape 6 同 回 四 | 


文字 列 を チェ ッ ク す る (全角 ) 


民 名 : 了 7992m9 (全角 文字 ) 
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SECTION 9-8 文字 列 を 確認 する 5 (全角 文字 ) 


介 ! 肌 計 ( 且 で コッド checkzenkaku.html 


<htm1> 
<tit1e>Check char4</ て it]e> 


<Script 1anguage="]avascript"> 


<!-- 
function checkA11( ){ 


回 


1f(checkZenkaku(document .myForm.strZenkaku.va1ue ) 
== fa1se){ 


document.myForm. strZenkaku.Tfocus( ) : 
document.myForm.strZenkaku.se1ect( ) : 
alert( "氏名 が 正しく あり ませ ん "): 
return alse: 

} 

else{ alert( "すべ て 全角 で す "):} 


function checkZenkaku(strTarget){ 


} 


Var 1, charTarget, transTarget: 
var char 1ength = (" あ ".1ength): 


transTarget = strTarget.replace(/[  ]/g, "") ぉ 
if(transTarget.1ength==O){ 
return false: 


} 
for (1i=0: <transTarget.1ength: =i+char 1ength){ 


charTerget = transTarget.charAt(1) 

if ((charTerget >= "!" && charTerget <= "-")|| ト 
(charTerget >= "。" && charTerget <= "")){ 
return 和 fa]se: 


} 


return true: 


//--> 


</ Script> 

<body bgco1or="#ffF8dc"> 

<h3> 文 字 列 を チェ ッ ク す る (全角 )</h3> 
<hr /> 
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<form name="myForm"> 
氏名 : <1nput type="text" name="strZenkaku" size="20" /> 
(全角 文字 )<br /> 
<hr /> 
<input type="button" value=" 確 認 す る " 

回 onc1ick="checkA11( )" 
Hg ce こい 
</body> 
</htm1> 


| 間 得 起 刻 . 


この サン ブ プル で は 、Web ペ ー ジ に 氏名 を 入力 する テキ スト フォ ー ム と 確認 ボ 
タン が 配置 され て いま す 。 確認 する ぁ | ボタ ン を クリ ッ ク す る と 、 テ キス ト フ ォ ー 
ム に 入力 され た 文字 列 が 全角 か どう か を チェ ッ ク し ます 。 

Web ペ ー ジ の 確認 すぅ | ボタン が クリ ッ ク さ れる と 、① の 部 分 の onclick イ 
ベン ト ハ ンド ラ で 指定 され て いる checkAll 関 数 が 呼び 出さ れ ま す 。 そ し て 、 
checkAll 関 数 の 中 の if 文 の 条件 式 で 、 さ ら に checkZenkaku 関 数 を 呼び 出し て 
いま す 。 こ れ は 、checkZenkaku 関 数 の 戻り 値 に より エラ ー 処 理 を 行う た めで 
す 。 

checkZenkaku 関 数 で は 、 変 数 の 宣言 を 行っ た 後 、「 あ 」 の 文字 列 の 長 さ を 確 
認 し て いま す 。 こ れ は P.293 で も 解説 し て いる よう に 、Web ブ ラウ ザ に よっ て 
全角 文字 の 長 さ の カウ ント 方 法 が 異な る 可能 性 が ある か ら で す 。 

次 に 、 全 角 ス ペー ス と 半角 スペ ー ス を 除去 し 、 入 力 さ れ た 文字 列 の 長 さ の 確認 
を し て いま す (③ の 箇所 )。 こ こ で 長 さ が 「0」 の 場合 に は 、checkAll 関 数 に 「false」 
を 返し て 終了 し ます 。 

この 後 、 ス ペー ス が 除去 され た 文字 列 を 格納 し た 変数 transTarget に 対し て 、 
1 文字 ずつ 切り 出し て 、 全 角 文 字 か ひど うか を 確認 し ます 。 確 認 に は 逆 に 、 半 角 文 
字 で な いか どう か を 調べ て いま す 。④ の 部 分 で 記述 され て いる の は 、「!」 か ら 
「-」 の 間 、 ま た は 「。」 か ら 「*」 の 間 の 場合 に は 、 切 り 出さ れ た 文字 を 半角 文字 と 見 
な し て 、checkAll 関 数 に 「false」 を 返す よう に な っ て いま す 。 こ れ は どう いう こ 
と か と いう と 、 文 字 コ ー ド 上 で 考え る と 「!」 か ら 「“」 の 間 と 「。] か ら 「"」 の 間 は 、 
半角 の 文字 コー ド と な っ て いる か ら で す 。 そ こ で 、 大 小 の 条件 式 で この 範囲 に 文 
字 か どう か を 確認 し て いる の で す 。 

それ ぞ れ の 文字 の 、Unicode で の 文字 コー ド は 、 次 の よう に な り ま す 。 
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この よう に 文字 コー ド 上 の 文字 の 範囲 を 使う こと に より 、 文 字 列 の 確認 を する 
こと が で きま す 。 


マ 文 字 コ ー ド 表 で の 範囲 





( 円 
8 = 
H M 
X ] この 間 は すべ 
て 半角 文字 
h m 
X } 007E) 
I 0 
D 
F KK 
V な [ 
f i k 
Y y { 
メ ウ 交 
カ ヶ す _。  。 この間 は すべ 
こ / E ー て 半角 文字 
ョ ル n (FFgE) 
I I ! 


checkAll 関 数 で は 、checkZenkaku 関 数 か ら の 戻り 値 が 「false」 の 場合 に は 、 
対象 と な っ た テキ スト フォ ー ム (この スク リプ ト で は "document.myForm. 
strZenkaku") に フォ ー カ ス を 合わ せ 、 入 力 文字 列 を ハイ ライ ト し 、 ア ラー ト で 
エラ ー メ ッ セ ー ジ を 出力 し ます 。 

この よう に 、 た っ た 1 つの 文字 列 の 入力 に し て も 、 さ ま ざ ま な 点 で 気 を 付け な 
く て は な ら な い 部 分 が あり ます 。 し か し 、 こ の よう な 処理 を し て いな いと 、 イ ン 
ター ネッ トシ ョ ッ プ や アン ケー ト な ど で ト ラブ ル の 原因 と な り ま すか ら 、 よ く 考 
えて 利用 する よう に し て くだ さい 。 


29/ 








ビ 。 瑞 ド 陣 嘩 往 1 


入力 サポ ー ト 
文字 列 + document.myForm.myText.va1ue 
document.myForm.myText.va1ue + 文字 列 





最近 で は 電子 商取引 (EC) も 盛ん に な っ て きま し た 。 そ の 際 に よく 自分 の 住所 、 
勤務 先 を 入力 する と いっ た 場面 に 遭遇 し ます 。 そ ん な と き に 、 入 力 の 補助 を し て 
くれ た ら 、 と 思う こと は あり ませ ん か ? そん な 機能 を 実現 する サン プル に な り 
ます 。 


商 弄 導 宮 。 


ヤマ 前 に 文字 列 を 付加 する 


鹿 input support - Microsoft Internet Explorer 


ファ イル (E) 編集 EC) 表示 ) お 気に入り (@⑧ ツー ル ① ヘル プ ⑪ 


入力 サポ ー ト 


ウフ バン 2 パフ リシン ケー 
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ここ を クリ ッ ク し て 、 
前 に 文字 列 を 付加 する ル 


午 input support - Microsoft Imternet Explorer 


ファ イル (E) 編集 (E) 表示 ) お 気に入り ぬ ) ツー ル ①) ヘル プ B 


入力 サポ ー ト 





[株式 会 社 フ パッ ク パプ リッ シンク 
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後に 文字 列 を 付加 する 


と 1 Input support 一 隔 jcrosoft Internet Explorer 
ファ イル E) 編集 (EC) 表示 () お 気に入り @ ツー ル ① 人 ヘルプ ゆい 


入力 サポ ー ト 











ここ を クリ ッ ク し て 、 
後に 文字 列 を 付加 する ル 


等 input support - Microsoft mternet Explorer 


アイ ル E) 編集 (EC) 表示 (V) お 気に入り (@) ツー ル ①) ヘル プ い 





UE を 。。 則 inputsapport..html 


<htm1> 
<tit1e>input support</ て ュ ト 1e> 
<Script 1anguage=" avascript"> 
< く !<< 
function addText(position, addtext){ ーーー マー ニーー-ーーー ニ ーー ニーー ーー 
if(position == "before"){ 

res = addtext + document.myForm.myTex 寺 .value: 

else{ 
res = document.myForm.myText.value + addtext: 


} 


document.myForm.myText.value = resi 
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は 
が = 
</ Script> 
<body bgco1or="# 和 ff8dc"> 
<h3> 入 力 サ ポー ト </h3> 
<hr /> 
<form name="myForm"> 
<input type="text" name="myText" size="50" /><br /> 
<input type="button" value=" 前 株 " onc1ick="addText('before', 
回 "株 式 会 社 ')" /> 
<1nput type="button" value=" 後 株 " onc1ick="addText('after'。 
回 "株 式 会 社 ')" /> 
</form> 
</body> 
</htm1> 


この サン ブル で は 「 株 式 会 社 ] と いう 言葉 を テキ スト フォ ー ム の 入力 項目 に 対し 
て 付加 する こと が で きま す 。Web ペ ー ジ 上 に は 2 つの フォ ー ム ボタ ン が 用 意 さ れ 
て お り 、 そ れ ぞ れ 「 前 株 ]、「 後 株 ] と いう よう に 表示 され て いま す 。 そ れ ぞ れ の 
ボタ ン が クリ ッ ク さ れる と フォ ー ム 内 の 文字 列 に 対し て 「 株 式 会 社 ] と いう 文字 列 
が 前 、 ま た は 後ろ に 付加 され ます 。 

この 文字 列 の 付加 を 実現 し て いる 部 分 は 、① で 記述 し て いる addText 関 数 で 
す 。addText 関 数 は 、2 つ 引数 を 取り ます 。 最 初 の 引数 position は 付加 する 文 
字 列 の 位置 、2 つ 目 の 引数 addtext に は 付加 する 文字 列 を 取り ます 。addText 関 
数 内 で は 、 引 数 と し て 取っ た position の 値 を 見 て 、「before] な ら ば フォ ー ム 
内 の 文字 列 の 前 に 、「after」 な ら 文 字 列 の 後ろ に 変数 addtext に 格納 され て いる 
文字 列 を 連結 し ます 。 文字 列 の 連結 に は 「+」 演 算 子 を 用 いま す 。 そ し て 、 連 結 し 
た 文字 列 を フォ ー ム に 対し て 代入 し て いま す 。 

この スク リプ ト で は 、addText 関 数 に 対し て 2 つの 引数 を 渡し て いる た め 、 汎 
用 的 に 使え る 関数 に な っ て いま す 。 連 結 する 文字 列 を 変更 する 場合 に は 、 関 数 の 
呼び 出し 側 の 2 つ 目 の 引数 を 書き 換え れ ば よい こと に な り ま す 。 
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レジ いい 負 ド 瑞 導い 間 


計算 を リア ル タ イ ム で 行う 
document.form オ ブ ジ ェクト ・.e1ements [++ ュ 1] .value 
<Tnput type="hidden" …> 





イン ター ネッ ト 上 の ショ ッ プ で 買い 物 を し て いる と き に 、 シ ョ ッ ピ ング カー ト 
や 見 積もり の 画面 を 上 見 た こと が ある と 思い ます 。 そ うい っ た Web ペ ー ジ で は 、 
品物 の 個数 を 変え た り 、 オ プシ ョ ン を 変更 し た りす る と すぐ に 合計 金額 が 変更 さ 
れる も の が 数 多く あり ます 。 そ ん な Web ペ ー ジ を 実現 する た め の 基 礎 的 な 部 分 
を 解説 し て み ま す 。 


筆 realtime calc] - Microsoft Internet Explorer 


商品 バス ケッ ト 


商品 コー 。 商品 名 。 
12345-1234 。 JavaScript ハンド ブック Y1200 


54321-1234 CGI/Per ハ ンド ブッ ク Y18001 
54321-4321 SQL ハンドブック \1.9801 


合 『 H5080 読み 込み 時 に 、 各 1 陣 
の 合計 が 計算 され る 


詩 realtime calc1 - Microsoft Internet Explorer 


| イル 集 ) 表示 お 気に入り ⑧ ツー ル ① へ ルプ ⑪ 
商品 バス ケッ ト 


12345-1234 。 JavaScript ハン ドブ ッ ク 
54321-1234 CGI/Ped ハ ンド ブッ ク 
54321-4321 SQL ハ ンド ブッ ク 


筐 数 を 変更 する と 、 リ 
アル タイ ム に 合計 が 変 
更 さ れる 
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1aoadns 較 


9 打電] realtimecalc.html 


<htm1> 

< も tt]1e>rea]time ca1c1</ て ュ ト 1e> 
<Script 1anguage="]avascr1pt"> 
ぐ 1<- 


Var amount = 3j 


function calcTota1( ){ 

var total1=0: 

Var i=0: 

Wibel(<aOUTE2 人 ee 
tota1 = tota1 + document.myForm.e1ements [1] 

回 ・value*document .myForm.e1ements [++ ュ 1] . va1ue : 

ピオ 1 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー②⑫) 

} 

document.myForm.1tota1 .val1ue = tota1: 一 一 ーー 一 ーーーーーーーー つ ③) 


} 

7/--> 

</ scr1pt> 

<body on1oad="ca1cTota1( ) " bgco1or="#ffffcc"> 
<hs3> 商 品 バ スケ ッ ト </h3> 

<hr /> 


raoaans 較 


<form name="myForm" method="post"> 
<tab1e> 
<tr bgco1or="#66ccff"> 
<th width="100"> 商 品 コー ド </th> 
<th width="200"> 商 品名 </th> 
<th width="70"> 単 価 </th> 
<th width="50"> 個 数 </h> 
< く /t エ > 
<tr> 
<td>12345-1234</td> 
<td>JavaScript ハ ンド ブッ ク </td> 
<td a1ign=" ェ ight">\1 ,200<Tnput type="hidden" name="rowOv" 
回 value="1200"></td> 
<td><Tnput type="text" name="rowO" value="1" size="5" 
回 onChange="ca1cTota1( ) "></td> 


@ 
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く /t エ > 
<tr bgco1or="ccfff 和 "> 
<td>54321 - 1234</ て d> 
<td>CGT/Per1 ハ ンド ブッ ク </td> 
<td a1ign="right">\1,900<Tnput type="hidden" name="row1v" 
回 Value="1900"></d> 
<td><Tnput type="text" name="row1" value="1" size="5" 
回 onChange="ca1cTota1( ) "></td> 
< く /t エ > 
< く tr> 
<td>54321-4321</d> 
<td>5S0L ハ ンド ブッ ク </td> 
<td a1ign=" ェ right">\1 ,980<Tnput type="hidden" name="row2v" 
回 value="1980"></td> 
<td><Tnput type="text" name="row2" value="1" size="5" 
回 onChange="ca1cTota1( ) "></td> 
< く /t エ > 
<tr><td co1span="4">&nbspi</td></t エ > 
<tr bgco1or="#cc 和 fff"> 
<td colspan="4" a11gn="right"> 合 計 金額 :<rnput type="text" 
回 name="1tota1" value="0" size="10"></d> 


< く /t エ > 


</tab1e> 
</ 和 form> 





</body> 
</htm1> 


ME も ココ 貞 NiL:S 


サン プル で は 、Web ペ ー ジ の ロー ド 時 と 、 テ ー ブ ル 内 の 品物 の 個数 を 変更 す 
る と 、 合 計 金 額 が 即座 に 計算 され 、 表 示さ れる よう に な っ て いま す 。 計算 は 
calcTotal 関 数 に 実装 され て いま す 。 

calcTotal 関 数 の 呼び 出し は 、Web ペ ー ジ ロー ド 時 に onload イ ベン ト ハ ンド 
ラ を 用 いて 呼び 出さ れ 、 テ キス ト フ ォ ー ム 内 の 数 値 が 変更 され た と き に 
onchange イ ベン ト ハ ンド ラ を 用 いて 呼び 出さ れ て いま す 。 関 数 の 呼び 出し に は 
引数 は あり ませ ん 。 
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calcTotal 関 数 で は 、 テ キス ト フ ォ ー ム 内 の 品物 の 個数 と 単価 を 使っ て 合計 金 
額 を 計算 し ます 。 計 算 は 各行 の 単価 と 個数 を 掛け 合わ せ て 行 の 小計 を 算出 し 、 行 
の 小計 を すべ て 足し 合わ せ た も の を 合計 と し て いま す 。 こ うい っ た 計算 を する 際 
の ヒン ト と な る 部 分 が 、 こ の 中 に 隠さ れ て いま す 。 そ れ は 、Web ペ ー ジ に は 表 
示さ れ て いな い フ ォ ー ム が 埋め 込ま れ て いる と いう こと で す 。 

商品 の 個数 は 、Web ペ ベー ジ に テキ スト フォ ー ム と し て 表示 され て いま す が 、 
単価 は フォ ー ム と し て は 表示 され て いま せん 。 し か し 、 フ ォ ー ム で な い 場 合 は 、 
通常 、Web ペ ー ジ に 表示 され て いた と し て も 計算 に 使う こと は で きま せん 。 そ 
こ で 、 ソ ー ス コー ド を 見 る と わか る よう に hidden フ ォ ー ム が 埋め 込ま れ て いて 、 
それ に 「rowNv」(N は 行か ら 1 を 引い た 数 字 ) と いう 名 前 が 付け られ て いま す 。 値 
と し て は 、 そ の 行 に 表示 され て いる 商品 の 単価 が 格納 され て いま す 。 


等 realtime calc1 - Microsoft Internet Explorer 


商品 コー ドド 。 商品 名 。 単価 個数 


12 _-123。 JavaS 0 ンド リッ ク h | 
54321-1234 CGI/PerW\ ン ドブ ッ ク | weoh | 


合計 金額 JO | 





テキ スト フォ ー ム 
個数 を 格納 


ここ で 、 隠 し フォ ー ム まで 含め て フォ ー ム の 数 を 数 える と 、 行 (変数 amount 
に 格納 ) の 2 倍 の フォ ー ム が ある こと に な り ま す 。 そ こ で 、① の 記述 の よう に 
while の 条件 式 は 行 の 2 倍 ま で と な り ま す 。 

実際 の 計算 で は 、elements[i] と elements[i+ 1] を 掛け る と 行 ご と の 小計 が 算 
出 で を る こと に な り ま す 。 な お 、 こ の サン プル で は 、elements[i+ 1] を 作る た め 
に elements[++1] と し て いま す 。 こ れ は 、 変 数 i に 「1] を 足し て か ら 計 算 に 使 
うと いう 意味 で す 。 さ ら に 、while ル ー プ の 先頭 に 戻る 前 に 変数 i に 1 を 足し て い 
ます (⑧ の 箇所 )。 こ れ で while ルー プ を 1 回 処理 する た びに 、 変 数 i は 「2」 ずつ 
増え て いく こと に な り 、while ル ー プ は 行 の 回 数 だ け 繰 り 返 ぐ れ ま す 。 な お 、 
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while ルー プ 中 で 各行 の 小計 が 変数 total に 足し 合わ され て いる の で 、while ル 
ー プ が 終了 する と き に は 合計 値 が 算出 され て いる こと に な り ま す 。 

最後 に 、 算 出し た 合計 値 を itotal と 名 付け られ た フォ ー ム に 表示 し て 終わ り ま 
す (③ の 箇所 )。 ま た 、 こ の サン プル で は 実装 し て いま せん が 、 消 費 税 の 算出 や 送 
料 を 足す 場合 に は 、 こ の 後に 処理 を 追加 する こと に な り ま す 。 

実際 に Web ペ ー ジ に 実装 し よう と 考え た 場合 、 こ こ で 紹介 し た サン プル は そ 
の まま で 使え る と いう も の で は あり ませ ん 。 と いう の は 、 こ うい っ た Web ペ ー 
ジ を 静 的 に 用 意 し て も 意味 が な いか ら で す 。 


T ! P に 


実際 に は 、 ユ ー ザ ー か ら の 反応 に よっ て 、CGI や ASP(Active Server Pages) 
を 使っ て 、Web サ ー バ ー 側 で 処理 を 行い 、 そ の 結果 と し て この スク リプ ト の よ 
うな Web ペ ー ジ が 生成 され て くる の が 通常 の シス テム に な り ま す 。 そ の た め 、 
CGI や ASP の 記述 の 中 に 、 こ こ で 解説 し た スク リプ ト の 要素 を 埋め 込ん で いく こ 
と に な り ま す 。 

ちょ っ と 考え る と 、 サ ー バ ー サ イド で 動作 する スク リプ ト (CGI や ASP な ど ) と 
クラ イア ント サイ ド で 動作 する スク リプ ト ( 本 サン プル の よう な スク リプ ト ) が 混 
在 す る こと に な り 、 な か な か が 厄介 に 感じ る で し ょ う 。 し か し 、 ユ ー ザ ー に と っ て 
より よい Web ペ ー ジ を 作る た め に 、 何 と か 乗り 切っ て くだ さい 。 
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Laodans 較 


Iaodans 較 


9.1 古い 遼 。 - 呈 い 


文字 列 を 置換 する 


変数 = 置換 対象 テキ スト .replace(RegExp オ ブ ジ ェクト , 置換 
文字 列 ) 





文字 列 を 扱う 作業 を し て いる と き に 、 よ く 文 字 列 置 換 を 行い ます 。 こ の 非常 に 
機能 を 限定 し た も の を 、Web ペ ー ジ 上 で 作成 し て み ま す 。 


は 1 お まま も 旧 \ 


マテ キス ト ボ ックス の 1 つ で も 入力 し な か っ た 場合 


強 replace chars - Microsoft Internet Explorer 


| カイル 編集 ) 表示 お 気 に 和 AOG ウー ル D へ 2 
文字 列 を 置換 する 


置換 対象 文字 
| 加藤 大 治郎 シリ ー ズ チャ ン ピ オ ン ! 
加 基 大 治郎 が 、2001 年 の 世界 ダラ ン ブ リ GP250 の シリ ー ズ チャ ン ピ 


オン に 輝い た 。 世界 チャ ン ピ オ ン を 決め た レース で も 優勝 し 
ー ズ ン 9 勝 目 と な っ た 。 





検索 する 文字 | 加 菊 大 二郎 
置換 後 の 文 字 列 








テキ スト ボッ クス に 1 つ で も 
入力 せ ず に 、 こ こ を クリ ッ ク ツル 


Microsoft Internet Explorer 区 






谷 検索 する 文字 列 が あり ませ ん 


アラ ー ト が 表示 され る 
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ママ すべ て テキ ス ト ボ ックス に 入力 し た 場合 


育 replace chars - Microsoft Internet Explorer 


ファ イル (FE) 編集 GE) 表示 ) お 気 に 和 D⑱) ツー ル ①D ヘルプ 


文字 列 を 置換 する 


置換 対象 文字 


原田 苦 也 シリ ー ズ チャ ン ピ オ ン ! 


| 原田 音 也 が 、2001 年 の 世界 ダラ ンプ ブリ GP250 の シリ ー ズ チャ ン ビ ピオ 
ン に 輝い た 。 世界 チャ ン ピ オ ン を 決め た し レース で も 優勝 し 、 シ ー 
ン 9 勝 目 と な っ た 。 











すべ て 入力 し て ここ を クリ ッ 
ク す る と 、 検 索 す る 文字 列 が 


置換 後 の 文 字 列 に 置換 され る 
し 入間 害 Sc 計 3 replacechar.html 
<htm1> 


<tit1e>rep1ace chars</tit1e> 
<script 1anguage="]avascript"> 
く !-- 
function replaceChars( ){ 

var strTarget, resu]tStr: 


//check form 

1f(document.myForm.myText.value == ""){ 
a1ert( "検索 対象 が あり ませ ん "): 
document.myForm.myText.focus( ) 


return 
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1aoaans 識 


f(document.myForm.sText.va1ue==""){ 
alert( "検索 する 文字 列 が あり ませ ん "): 


document .myForm.sText. 和 focus( ) : 


returni 

+} 

if(document.myForm.rText.value==""){ 
al1ert( "置換 後 の 文 字 列 が あり ませ ん "): 
document.myForm.rText. 和 focus( ) 
returni 

+} 


//replace procesSs 


var regPattern = new RegExp( 


回 document.myForm.sText.value, "g"): ーー 一 ーーーーーーーー(⑫) 
var replaceStr = document.myForm.rText.va1ue: 
var targetStr = document.myForm.myText.va1ue: 
var resu]tSrt = targetStr.replace( 
回 regPattern, replaceStr ) : document.myForm.myText.value 
回 = resu1tSrt: 
} 
7/=-> 
</ Script> 
<body bgco1or="#fff8dc"> 
<h3> 文 字 列 を 置換 する </h3> 
<hr/> 


<form name="myForm"> 


置換 対象 文字 :<br /> 


<textarea name="myText" co1s="60" rows="15"></textarea> 


回 <br /> 

検索 する 文字 列 : <input name="sText" type="text" size="20" /> 
回 <br /> 

置換 後 の 文 字 列 : <input name="rText" type="text" size="20" /> 
回 <br /> 

<hr /> 

<input type="button" va1ue=" 置 換 " 記 
回 onc1ick="rep1aceChars()" /> 
es ーー 
</body> 
</htm1> 
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この スク リプ ト で は 、 大 き な テ キス ト エ リア と 、 テ キス ト ボ ックス が 2 つ 、 さ 
ら に [置換 ] ボタ ン が 用 意 さ れ て いま す 。 

動作 と し て は 、「 置 換 対象 文字 列 ] テ キス ト エ リア に 文字 列 を 入力 し ます 。 さら 
に 「 検 索 す る 文字 列 」 に 検索 し た 文字 、「 置 換 後 の 文字 列 」 に 検索 し た 文字 列 を 軒 
き 換え る 文字 列 を 入力 し ます 。 そ し て 、 [置換 ] ボ タン を クリ ッ ク す る と 置換 対象 
文字 列 の テキ スト で 、「 検 索 す る 文字 列 ] に 入力 し た 文字 列 と 同じ 部 分 が 「 置 換 後 
の 文字 列 ] に すべ て 置換 され ます 。 

動作 と し て は [ 量 換 ] ボ タン を クリ ッ ク す る と 、onclick イ ベン ト ハ ンド ラ に 指 
定 さ れ た replaceChars 関 数 が 起動 され ます (① の 箇所 )。replaceChars 関 数 は 
大 きく 分 け て 2 つの 部 分 で 構成 され て いま す 。1 つ は Web ペ ー ジ 上 に 配置 され た 
フォ ー ム の 入力 チェ ッ ク 、 も う 1 つ は 実際 に 文字 列 を 置換 し て いる 部 分 で す 。 

フォ ー ム の チェ ッ ク 部 分 で は 、 そ れ ぞ れ 3 つ の フォ ー ム が 空 で な いか どう か を 
確認 し て いま す 。 も し も 、 フ ォ ー ム に 入力 が な い 場 合 に は 、 そ れ ぞ れ に アラ ー ト 
を 表示 し 、 そ の フォ ー ム に フォ ー カ ス を 移動 し ます 。 さ ら に 、return を 返す の 
で replaceChars 関 数 を その 部 分 で 終了 し ます 。 そ の た め 、 文 字 列 の 置換 は 行わ 
れ ま せん 。 

特定 の フォ ー ム に フォ ー カ ス を 移動 する に は focus メ ソ ッ ド を 用 いま す 。 
focus メ ソ ッ ド の 書式 は 以下 ひよ うに な り ま す 。 


document オ ブ ジ ェクト .form オ ブ ジ ェクト . 要 素 オ ブ ジ ェクト .focus( ) 

この よう に 記述 する と 、 指 定 さ れ た 要素 オブ ジェ クト が フォ ー カ ス さ れ ま す 。 

次 に 、 文 字 列 の 置換 する 部 分 で す 。 文 字 列 の 置換 に は RegExp オ ブ ジ ェクト と 
replace メ ソ ッ ド が 用 いら れ て いま す 。RegExp オ ブ ジ ェクト は 検索 の パタ ー ン 
を 指定 する も の で す 。 書 式 は 以下 の よう に な り ま す 。 


Var 変数 = new RegExp( 検 索 パ ター ン [ , "フラ グ "] ) : 


@RegExp オ ブ ジ ェクト の フラ グ 






この フラ グ の 指定 は 省略 する こと が で きま す 。 ま た 、 上 記 の 記述 は 、 次 の よう 
に 記述 する こと も で きま す 。 
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raodaans 識 


変数 = / 検 索 パタ ー ン / フ ラグ : 


スク リプ ブ ト で は 、「 検 索 す る 文字 列 」 と 名 付け られ て いる テキ スト フォ ー ム か ら 
取得 し た 値 を 検索 パタ ー ン に 入れ 、 フ ラグ で 「g」 を 指定 し て いま す (②④ の 人 箇所)。 
その た め 、 す べ て の パタ ー ン を 変換 する 指定 に な っ て いま す 。 

検索 パタ ー ン を 設定 し た 後 は 、 実際 に 置換 を する 部 分 で す 。 置 換 に は replace 
メソ ッ ド を 用 いま す 。replace メ ソ ッ ド は 以下 の よう な 書式 と な り ま す 。 


変数 = 置換 対象 テキ スト .rep1ace(RegExp オ ブ ジ ェクト , 
置換 文字 列 ) : 


その た め 、 置 換 が 行わ れる テキ スト で ある 「 置 換 対 象 文 字 ] テ キス ト エ リア の 値 
が 変数 targetStr に 、 置 換 文字 列 が 変数 replaceStr に 格納 され 、③ の 箇所 の よう 
に 、replace メ ソ ッ ド が 実行 され ます 。replace メ ソ ッ ド の 実行 結果 は 左辺 の 変 
数 resultSrt に 格納 され ます 。 最 後に 置換 結果 の 変数 を テキ スト エリ ア に 代入 し 
て いま す 。 

この よう に 比較 的 簡単 に 、 テ キス ト を 置換 する Web ペ ー ジ を 制作 する こと が 
で きま す 。 検索 条件 の 指定 の た め の ラ ジオ ボッ クス な ど を 付け る と より 一 層 使 い 
勝手 の よい も の が 作成 で きる で し ょ う 。 
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FORM MAIL 






ivw waol 較 


kl。 ら 遼 ド 導い 間 


フォ ー ム か ら メ ー ル を 送信 する 


<form name= "form1" method= “post' action= 
"mat1to : 送信 先 メ ー ル アド レス " onsubmit= “document. 
Torm オ ブ ジ ェクト 名 .encoding= text/plain'”> 





Web ペ ー ジ で 、 ユ ー ザ ー か とら 感想 な どの フィ ー ド バッ ク を 送っ て も ら う 方 法 
の 1 つ に メー ル が あり ます 。 し か し 、Web ペ ー ジ を 見 て いる 途中 で 、 メ ー ル を 書 
く た め に わざ わざ メー ル ソ フ ト を 起動 する の は 、 ユ ー ザ ー に と っ て 面倒 な こと で 
す 。 そ ん な と き に 、JavaScript を 使っ て 、Web ペ ー ジ 上 か ら 直 接 メー ル を 送信 
する よう に し て お く と 便利 で し ょ よう 。 こ うし て お け ば 余計 な 手間 も か か ら ず 、 ユ 
ー ザ ー に 親切 な Web ペ ー ジ に な り ま す 。 


和 人 


マフ ォ ー ム メー ル の 送信 


雪 Form Mail 1 - Microsoft Imternet Explorer 


ファ イル (E) 編集 EC) 表示 ) お 気 に 入 DO ウール ① ヘル プ い 


フォ ー ム メー ル 1 


フォ ー ム か ら メ ー ル を 送信 する 


| マイ カ が 来 日 する と き に 限っ て 、 私 は 時 間 <| 
| が 取れ ませ ん 。 

今度 、 ビ ルフ ラン シェ で ゆっ くり させ て < 

だ さい 。 


Send Mai 





メッ セー ジ を 入力 し て 、 
ここ を クリ ッ ク す る し 


Microsoft Imternet Explorer 


爺 cx フーム の テー 多紀 に る れ ます 。 


この 送信 は 続行 で きま す が 、 取り 消す こと も で きま す 。 





クリ ッ ク し て 、 操作 を 続行 する 
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SECTION 10-1 $ フォ ー ム か ら メ ー ル を 送信 する 


Outlook Express 





プログラム が ユー ザー の 代わ り ( 入 の 電子 メー ル メッ セー ジ を 送 
了 K 7 次 の 電子 メー ル メッ セー ジ を 送 


件 名 IMicrosoft jntermet Explorer が か ら 投稿 され た フォ ー ム 
メッ セー ジ を 送信 し ます が ? 


送信 し な い (D) 





ここ を クリ ッ ク し て 送信 する 


マヤ 受 信 し た メー ル ソ フ ト で の 表示 


人 Microsoft nternet Explorer か ら 投稿 され た フォー ム - 日 本 語 .. 周 | 貼 | 区 | 
プア イル 編集 表示 ツー ル D メッ セー ジ (MD 人 ヘルプ 


送信 者 : Mivasaka Masateru 
日 時 : 2001 年 11 月 6 日 11:48 


元 先 : sfukui@nub softbank co.ip 


件 名 : Microsoft jnternet Explorer か ら 投 稿 され た フォ ー ム 





maiE マ イカ が 来 日 する と き に 限っ て 、 私 は 時 間 が 取れ ませ ん ,。 
今度 、 ビ ルフ ラン シェ で ゆっ くり させ て くだ さい 。 





メー ル ソ フ ト で 受信 し た メッ セー ジ 


に EN 0M 】 formmail1 .html 


<htm1> 

<tit1e>Form Ma1] 1</t ュ ト 1e> 
<body bgco1or="#fff8dc"> 

<h3> フ ォ ー ム メー ル 1</h3> 

<hr /> 

フォ ー ム か ら メ ー ル を 送信 する <br /> 
<form name="form1" method="post" 

回 、action="mai1to:address@domain" 

回 onsubmit="document.form1 .encoding='text/p1ain' "> 
<textarea rows="8" co1s="40" name="mai1"></textarea><br /> 
<1nput type="Submit" value="Send Mai1"> 

</form> 
</body> 
</htm1> 
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1IVW waol 較 


1IvW waoa 較 


し 人 笠 前 7 1 


この サン プル は 、 テ キス ト エ リア に 文章 を 入力 し 、[-ssnd ai ] ボタ ン を クリ ッ 
ク す る と 、 入 力 し た 文章 が 指定 され た メー ル ア ド レス に 対し て 送ら れる と いう も 
の で す 。 

サン プル で は 、 フ ォ ー ム に さま ざま な 属性 が 指定 し て あり ます 。 ま ず 、 name 
属性 で フォ ー ム 全体 に 「form1」 と いう 名 前 を 設定 し 、method 属 性 で post( 標 
準 入力 ) の 指定 、action 属 性 で 送信 先 の メー ル ア ドレ ス の 指定 を 行っ て いま す 。 
メー ル ア ド レス の 指定 は 以下 の ひよ うに な り ま す 。 


action="mai1to : 送 信 先 メー ル ア ド レス " 


また 、[ ena ai ]」 ボ タン を クリ ッ ク す る と 、<form> タ グ の onsubmit イ ベン 
ト ハ ンド ラ に よっ て フォ ー ム の 送信 形式 が 設定 され ます 。 こ れ は 以下 の よう に 指 
定 し ます 。 


document.form オ ブ ジ ェクト 名 .encoding 


この サン プル で は 、「texVplain」 に 設定 し て いま す 。 

ここ まで の 処理 に より 、 テ キス ト エ リア に 入力 され た 文章 が 、<form> タ グ の 
action 属 性 に 設定 し て ある メー ル ア ド レス に 、 メー ル と し て 送信 され ます 。 な お 、 
通常 は 標準 の メー ル ソ フ ト の 送信 トレ イ に 入れ られ ます 。 


6 I し 4 S 


この サン ブル の よう に 、JavaScript を 用 いて Web ペ ー ジ か ら メ ー ル を 送信 す 
る 場合 に は 、 使 っ て いる Web ブ ラウ ザ と メー ル ソ フ ト の 関係 に よっ て うま く 動 
作 し な いこ と が あり ます 。 

IE の 場合 、 標 準 で 使用 する メー ル ソ フ ト が Outlook Express で な いと 、 使 用 
し て いる メー ル ソ フ ト の メー ル 作 成 画面 が 起動 し こし まい ます 。NN4 の 場合 、 標 
準 で 使用 する ソフ ト が Netscape Mail(Messenger) で な いと 使用 し て いる メ 
ー ル ソフ ト の メー ル 作 成 画面 が 起動 し こし まい ます 。 

そし て 、NN6 で は セキ ュ リ ティ の 関係 か ら 、 標 準 で 使用 する メー ル ソ フ ト が 
Netscape Mail で あっ て も 、 メ ー ル ソフ ト の メー ル 作 成 画面 が 表示 され ます 。 
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10-2 放 癌 調 ! = 遼 ヾ 胃 


フォ ー ム メー ル に さま ざま か 情報 を 付加 する 


<input type= hidden" name= “element 名 " value= 
“フォ ー ム メー ル に 付加 する テキ スト "> 





複数 の Web ペ ー ジ に 違う 内 容 の メー ルフ ォ ー ム を 用 意 し て いる 場合 、 ど の 内 
容 に 対し て メー ル を 送っ て き て くれ て いる の か が わか ら な く な っ て し まい ます 。 
形式 が 特徴 的 だ っ た ら よ い の で す が 、 そ う で な いり い 場合 は 、 ど の 部 分 に 対す る 感想 
や 意見 な の か も わか ら な く な っ て し まい ます 。 そ ん な 問題 を 避け る た め に 、 ど こ 
の Web ペ ー ジ か ら メ ッ セ ー ジ が 来 て いる の か 、 と いう 情報 を メー ル 本 文 に 加え 
て み ま す 。 


且 に 人 生 い 記 > 食い ま 


マ 送 信 す る フォ ー ム メー ル 


当 Form Mail 2 - Microsoft Internet Explorer 
: アカ イル (E) 編集 ) 表示 お 気に入り D⑯ ツー- ル ① へ ルプ 6 
フォ ー ム メー ル 2 


フォ ー ム か ら メ ー ル を 送信 する 


宮坂 さん 、 ま た 原稿 が 遅れ て いま す 。 す ぐ =| 
に 送っ て くだ さい 。 も うこ れ 以 上 は 待て ま 
| せん | 


EE 科 





ここ を クリ ッ ク し て 送信 
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TIVW wao』 較 


TlvW wao 較 





マヤ 受 信 し た メー ル ソ フ ト で の 表示 


到 Microsoft Internet Explorer が ら 投 薔 そ され を た フォー ム - 日 本 語 







page= ア ン ケ ー ト 1 より 
mai ビ 宮坂 さん 、 また 原稿 が 遅れ て いま す 。 すぐ に 送っ て くだ さい 。 
も うこ れ 以 上 は 待て ませ ん 。 


メー ル に この 情報 が 
追加 され て いる 


formmail2.html 


<htm1> 

<tit1e>Form Mai1 2</t ュ t1e> 

<body bgco1or="#fFffT8dc"> 

<h3> フ ォ ー ム メー ル 2</h3> 

<hr /> 

フォ ー ム か ら メ ー ル を 送信 する <br /> 

<form name="form1" method="POST" action= 


回 "mai1to:address@domain"onsubmit="document. 
回 form1.encoding='text/p1ain'"> 
<input type="htdden" name="page" 
回 va1ue=" ア ン ケ ー ト 1 より " /> 
<textarea rows="8" co1s="40" name="mai1"> 
ーーーーーーーー③ 


</textarea><br /><input type="submit" value="Send Mai1"> 
</form> 


</body> 
</htm1> 





この スク リプ ト で は 、[.sena ai ] ボ タン を クリ ッ ク す る と 、 テ キス ト エ リア に 
入力 し た 文字 に 、Web ペ ー ジ の 名 前 が 付け 足 さ れ た メー ル と し て 送信 され ます 。 
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① の 箇所 で 、 フ ォ ー ム 全体 に は 「form 1」 と いう 名 前 が 付け られ て いま す 。 
action 属 性 に は 送信 先 の メー ル ア ド レス を 設定 し 、onsubmit イ ベン ト ハ ンド 
ラ に エン コー ド 方 法 を 指定 し ます 。 

この サン ブル で は 、 通 常 の フォ ー ム に 加え て 、 画 面 上 に 表示 され な い 
"hidden" と いう フォ ー ム を 配置 し て いま す 。 この hidden フ ォ ー ム に は 「page」 
と いう 名 前 が 付け られ 、value 属 性 の 値 と し て 「 ア ン ケ ー ト 1 より 」 と いう 文字 列 
が 設定 され て いま す (⑧@ の 箇所 )。 ま た 、 文 章 を 入力 し て も ら う テキ スト エリ ア の 
部 分 に は 「mail」 と いう 名 前 が 付け られ て いま す (③ の 箇所 )。 

[ssnd Mai ]」 ボタ ン を クリ ッ ク す る と 、<form> タ グ の action 属 性 で 設定 され て 
いる アド レス に メー ル が 送信 され ます 。 こ の と き 送 信 さ れる メー ル の 内 容 は 、 以 
下 の よ うに な り ま す 。 


つま り 、 画面 上 で は 見 えて いな い hidden フ ォ ー ム の 内 容 も 、 本 文 に 自動 的 に 
記入 され る の で す 。 


T | P に 


hidden 要 素 は 、WWeb ペ ー ジ を イン タラ クティ ブ に する の に 重要 な 役割 を 持っ 
て いま す 。HTML で は 、 記 述 し た 要素 は 表示 され て し まう た め 、Web ペ ー ジ 内 
で 必要 な 情報 は すべ て 表示 し な いと いけ な いと 思い が ち で す が 、hidden 要 素 を 
用 いれ ば Web ペ ー ジ の 裏 ? に 隠す こと が で きま す 。 記述 は 以下 の よう に な り 
ます 。 


<input type="hidden" [name=" 名 前 "] [value=" 値 "] /> 


name 属 性 と value 属 性 は オプ ショ ン で す が 、 値 を 入れ て お くに は 両方 と も な 
いと 意味 が あり ませ ん 。 し か し 、 後 か ら ス クリ プ ト な ど で 操 作 す る こと が で き 、 
添え 字 に よる アク セス も 可能 な の で 、 操 作 し た 結果 を 格納 する 入れ も の と し て 用 
意 し て お く と いう こと も で きま す 。 

hidden 要 素 も フォ ー ム の 1 種 な の で 、 他 の フォ ー ム の 要素 と 同様 に アク セス 
する こと が で きま す 。name 属 性 が 指定 され て いれ ば 名 前 に よる 参照 も 、 添 え 字 
に よる 参照 も 可能 で す 。 
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1IVW waol 較 









10-3 机上 机 い 上 


フォ ー ム メー ル に Web ペ ー ジ の タイ トル を 付加 する 
document.form オ ブ ジ ェクト 名 .e1ement オ ブ ジ ェクト 名 . 
value=document.t ュ 1]e 


この サン プル で は 、Web ペ ー ジ か ら メ ー ル を 送信 する 際 に 、 本 文 の 最後 に 
Web ペ ー ジ の タイ トル を 加え ます 。Web ペ ー ジ の タイ トル を 加え る こと で 、 複 
数 の Web ペ ー ジ に 送信 フォ ー ム を 設置 し て いる 場合 な ど に 、 管 理 が し や すく な 
り ま す 。 

フォ ー ム を 使っ て メー ル を 送る 場合 、 ス クリ プ ト 部 分 を <form> タ グ 内 に 書く 
こと も 可能 で す が 、 そ れ だ け だ と 複雑 な 処理 を 行う こと は で きま せん 。 メ ン テ ナ 
ンス の こと を 考え て も 、 ス クリ プ ト 部 分 は 独立 させ た ほう が よい で し ょ う 。 この 
サン ブル で は 、 ス クリ プ ブ ト 部 分 を 分 け て 記述 し て いま す 。 





良 Form Mail 3 - Microsoft Internet Explorer 





ここ を クリ ッ ク し て 送信 
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マヤ 受信 し た メー ル ソ フ ト で の 表示 


駆 Microsoft Internet Explorer が か ら 投 稿 それ た フォ ー ム - 日 本 
: フイ ル (FE) 編集 上 表示 ッ ツール D セツ へ ルプ ⑱ 


Mivasaka Masateru 

2001 年 1 月 6 日 1149 

sfukui@softbankcojp 

Microsoft jnternet Explorer が ら 投 稿 され た フォ ー ム 
| mai に ご 無 沙汰 し て お り ま す 。 


次 回 の 友の会 は 、 神楽 坂 で 行い まし ょ う 。 
お いし い お 酒 を 飲ま せ て くれ る 店 を 見 つけ まし た の で 。 


Page=Form Mgil 3 2 


Web ペ ー ジ の タイ トル が 
追加 され て いる 





UE)RUICS コ 生 formmail3.html 


<htm1> 

<tit1e>Form Ma1] 3</t ュ t]e> 

<Script 1anguage="]avascript"> 

< く !-- 

function addTit1e( ){ 
document.sendmai1 .encoding='text/p1ain': 
document. sendmai1 .Page .value=document .t ュ 1e 


} 
// こ => 
</script> 


<body bgco1or="#fff8dc"> 

<h3> フ ォ ー ム メー ル 3</h3> 

<hr /> 

フォ ー ム か ら メ ー ル を 送信 する <br /> 

<form name="sendmai1" method="post" action="mai1to:address 

回 @domain" onsubmit="addTit1e( ) "> ーーーーーーーーーーー 一 (① 
<textarea rows="8" co1s="40" name="ma11"></textarea><br /> 
<input type="submit" value="Send Mai1"> 
<input type="hidden" name="Page"> ーーーーーーーーーー ーーー(3③) 

く </form> 

</body> 

</htm1> 


319 
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1IVW waoa 較 


| 


二 も 1 6 S 


この スク リプ ト で は 、[5Ssna wsi ] ボタ ン を クリ ッ ク す る と (① の 箇所 ) の 
onsubmit イ ベン ト ハ ンド ラ に よっ て addTitle 関 数 が 呼び 出さ れ ま す 。 

⑧ の addTitle 関 数 に は 、2 つ の 処理 が 設定 され て いま す 。1 つ は フォ ー ム で 入 
力 し た 文字 列 の エン コー ド で す 。 そ し て 、 も う 1 つ は メー ル 本 文 の 最後 に Web ペ 
ー ジ タイ トル を 記入 する こと で す 。Web ペ ー ジ の タイ トル は <title> 一 </title> 
の 間 に 記 述 し た 内 容 で 、 以 下 の よ うに 指定 で きま す 。 


document.t ュ t1e 


この サン プル で は 次 の よう に 記述 し て いま す 。 


「sendmail」 は 、 フ ォ ー ム 要素 に 付け られ て いる 名 前 で す 。 フ ォ ー ム 内 に は 、 
③ の と ころ で 「Page」 と いう 名 前 が 付け られ た hidden フ ォ ー ム オブ ジェ クト が 
配置 され て いま す 。 こ の オブ ジェ クト の value プ ロバ ティ に 、Web ペ ー ジ の タ 
イト ル を 代入 し て いる と いう こと で す 。 

この フォ ー ム を 送信 する と 、 次 の よう な 形式 で 記述 され た メー ル が <form> タ 
グ の action 属 性 に 指定 され て いる メー ル ア ド レス に 届き ます 。 








10-4 机 NM 長い NM 


フォ ー ム メー ル に サブ ジェ クト を 設定 する 


メー ル を 受信 する と き 、 サ ブ ジ ェクト が わか りや すけ れ ば 、 大 量 の メー ル が 届 
いて も 大 事 な メ ー ル を 見 落と すこ と は あり ませ ん 。 ま た 、 サ ブ ジ ェクト ご と に メ 
ー ル を 振り 分 けら れる メー ル ソ フ ト を 使え ば 、 内 容 ご と に メー ル を 振り 分 ける こ 
と も 簡単 に で きま す 。 






まま 0 / 





マヤ 送 信 す る フォ ー ム メー ル 


筆 Form Mail 4 - Microsoft Imternet Explorer 


定 に な っ て いま す 。 
ー 緒 に 行き ます か ? 今 な め 予 約 の 追加 が 
可能 で す 。 





受信 メー ル ソ フ ト で の 表示 サブ ジェ クト (件 名 ) が 付い て いる 


会 from Form Mail - 日 本 語 (自動 居 択 ) 


し エズ の レス トラ ン に 行く 予定 に な っ て いま 


一 緒 に 行き ます か ? 今 ね ら 予約 の 追加 が 可能 で す 。 
page=Form Mail 4 
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1IVW wao』 較 


し 大夫 「 滞 間 類 基 線 : formmail4.html 


<htm1> 

<tit1e>Form Mai1 4</ て 11e> 

<script 1anguage="]avascript"> 

く !-- 

function addTit1e( ){ 
document.sendmai1.encoding='text/p1ain': 
document . sendmai1 . page.value=document.tit1e: 

} 

7/--> 

</SCRTPT> 

<body bgco1or="#fFff8dc"> 

<h3> フ ォ ー ム メー ル 4</h3> 

<hr /> 

フォ ー ム か ら メ ー ル を 送信 する <br /> * の 

<form name="sendmai1" method="post" action= 

回 "mai1to:address 

回 @domain?sub]ect=from Form Mai1" 

回 onsubmit="addTit1e( ) "> 
<textarea rows="8" co1s="40" name="ma11"></textarea><br /> 
<input type="submit" value="Send Mai1" /> 
<input type="hidden" name="page" value=" ア ン ケ ー ト 1 より " /> 

</form> 

</body> 

</htm1> 


基本 的 な 流れ は 、 こ の セク ショ ン の 他 の スク リプ ト と 同じ で す 。[ sen Mai ] ボ 
タン を クリ ッ ク す る と 、<form> タ グ の action 属 性 で 指定 され て いる アド レス 
に 、 テ キス ト エ リア に 入力 し た 文章 が メー ル と し て 送信 され ます 。 

送信 され る メー ル に サブ ジェ クト を 付け る に は 、<form> タ グ の action 属 性 
で 設定 する アド レス 部 分 に 、 送 信 先 と サブ ジェ クト を 指定 し ます (① の 箇所 )。 


action= "mai1to: メ ー ル アド レス ? sub]ject= サ ブ ジ ェクト " 


つま り 、 ア ドレ ス の 直後 に 「?] で 区 切っ て 「subject= サ ブ ジ ェクト 」 と 入力 する 
と 、 設 定 し た 文字 列 が 送信 され る メー ル の サブ ジェ クト に な る の で す 。 す ぐに 内 
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SECTION 10-4 金 フォ ー ム メー ル に サブ ジェ クト を 設定 する 


容 が わか る よう な サブ ジェ クト を 付け て お いて 、 ア ン ケ ー ト や 感想 な どの フィ ー 
ド バ ッ ク を 効率 よく 利用 し まし ょ う 。 た だ 、 日 本 語 の サブ ジェ クト は 文字 化け す 
る 場合 が あり ます の で 、 な る べく 英字 に し て お く の が よい で し ょ う 。 


XML 


イン ター ネッ ト で 注目 され て いる 技術 の 1 つ に XML(eXtensible 
Markup Language) が あり ます 。 XML は W3C に より 制定 され 、 非 常に 
柔軟 な 規格 で ある た め 、 さ ま ざ ま な マー クア ッ プ 言語 の 定義 に 使わ れ 、 現 在 
数 多く の 規格 が 検討 、 制 定 さ れ て いま す 。 

XML を 用 いる と 、 デ ー タ 構造 と スタ イル を 分 離し た 文書 デー タ を 作成 で 
きた り 、 シ ステ ム 間 を つなぐ メッ セー ジ を 定義 で きた り 、 デ ー タ の 書式 を 定 
義 で きた り し ます 。 こ こ で 重要 な の は 、 こ れ ら の さま ざま な 仕 様 が XML と 
いう 一 定 の 規格 に よっ て 構築 され て いる こと で す 。 こ れ に より XML の 処理 
が で きる な ら ば 、XML に 基づい た 仕様 の デー タ を 一 定 の レベ ル ま で は 処理 
で きる こと に な り ま す 。 こ の 処理 を する の が XML パー サー と 呼ば れる ソフ 
ト で 、OS に 組み 込ま れ た り 、Web ブ ラウ ザ に 組み 込ま れ た り し て いま す 。 

XML パー サー は XML 文書 か ら デ ー タ の 取り 出し 、 挿入 、 デー タ 内 の 操作 、 
表示 の 作成 な ど を 行う こと が で きま す 。 こ の よう に XML パー サー が XML 文 
書 を 扱う た め の 機 能 を 提供 し て いる の で 、 プ ログ ラマ ー は XML パー サー の 
機能 を 用 いれ ば よい こと に な り 、 生 産 効 率 が 上 が り ま す 。 

Web ペ ー ジ 制作 で の XML と の 関わ り 合 い を 考え て みる と 、HTML を 
XML ベー スズ で 再 構築 し た XHTML が すでに 実用 段階 に 入っ て いる の を は じ 
め 、JavaScript に より XML パー サー を 操作 で きる 環境 が すでに 整っ て いる 
な ど 、 い つ で も 使え る 状態 で す 。 

この よう に 、XML は これ か ら の Web サ ービス の 作成 に は 欠か せな い 技 術 
で す 。XML に つい て は 、 次 の URL を 参照 し て くだ さい 。 


URL http://www.w3.org/TR/REC-xm1 


URL http://www.fxi8.co.Jp/DMS/sgm1 /xm1/wrapper-Xm1- 
19980210.htm1 (日 本 語 訳 ) 
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1IvW waol 較 


1IvW wao』 識 











ke ら = 環 い 陣 中間 


N 四 
フォ ー ム を 送信 する と き に チェ ッ ク を 行う 


return 千 alse: 





フォ ー ム を 使っ た メー ル を 使う と き に 、 ユ ー ザ ー に 必ず 入力 し て ほし い 部 分 に 
入力 が 行わ れ て いる か どう か の チェ ッ ク を 行い た いこ と が あり ます 。 も し 、 入 力 
が され て いな いな どの 場合 は 、 メ ー ル の 送信 処理 を 途中 で 止め て 、 ア ラー ト を 表 
示 で きる よう に し て お く と 便利 で す 。 


午 form mail 5 - Microsoft Imternet Explorer 
プア イル (E) 編集 CC) 表示) お気 に AD@⑯ ウー- ル O AV 
フォ ー ム メー ル 


フォ ー ム か ら メ ー ル を 送信 する 





何 も 入力 せ ず に ここ を クリ ッ ク す る と … 


ャ 


当 form mail 5 - Microsoft Internet Explorer 
プア イル 征 介 ) 表 お CADG ウェ 0 AM 
フォ ー ム メー ル 


フォ ー ム か ら メ ー ル を 送信 する 


Microsoft Imternet Explorer | 災 | 


人 め 本 文 が 入力 され て いま せ A。 


Send Ma 善人 告 の アラ ー ト が 
表示 され る 
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<htm1> 
<tit1e>form mai] 5</t ュ て 1e> 
<Script 1anguage="avascript"> 
く !-- 
function checkForm( ){ 
if(document.sendmai1 .mai1 .value==""){ 
alert( "本 文 が 入力 され て いま せん 。"): 
return fal1se: 
+ 
else{ 


document.sendmai1 .encoding='text/p1ain': 
document.sendmai1 .page .value=document.tit1e: 


} 

7/--> 

</SCRTPT> 

<body bgco1or="#fff8dc"> 

<h3> フ ォ ー ム メー ル </h3> 

<hr /> 

フォ ー ム か ら メ ー ル を 送信 する <br /> 

<form name="sendma11" method="post" 

回 action="mai1to:address@domain?subject=from Form Mai1" 

回 onsubmit="return checkForm( ) "> 一 ーーーーーーーーーーーーー(①) 
<textarea rows="8" col1s="40" name="ma11"></textarea><br /> 
<input type="submit" value="Send Mai1' /> 
<1nput type="hidden" name="page' /> 

</form> 

</body> 

</htm1> 


2 


基本 的 な 流れ は 、 こ の セク ショ ン の 他 の スク リプ ト と 同じ で す 。 異な る 部 分 は 、 
<form> タ グ に 指定 され て いる onsubmit イ ベン ト ハ ンド ラ に 、 次 の 記述 が され 
て いる 点 で す (① の 箇所 )。 
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TIvW wao 較 


nvw waoa 較 


onsubmit="return 関数 名 ( )" 


<form> タ グ の onsubmit 属 性 で この よう に 関数 の 呼び 出し を 記述 し 、 呼 び 出 
され た 関数 か ら return 命 令 で 「false」 が 返っ て くる と 、 フ ォ ー ム 内 容 の 送信 が 中 
止 さ れ ま す 。onsubmit イ ベン ト ハ ンド ラ で 呼び 出さ れ て いる checkForm 関 数 
で は 、 フ ォ ー ム に 入力 が され て いる か どう か を value プ ロバ ティ を 使っ て 調べ て 
いま す 。 も し も 、 入 力 が な い 場 合 に は ② の 箇所 の よう に return 命 令 を 使っ て 
「false」 を 返し ます 。 こ の と き 、 呼 び 出し 元 の onsubmit イ ベン ト ハ ンド ラ に も 
[false」 が 返さ れ て いま す 。 こ れ に より フォ ー ム の 送信 を 止め る こと に な り ま す 。 

フォ ー ム に 入力 が ある 場合 に は 、 タ イト ル を 付加 し て 送信 し ます 。 
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ACCENT 






rina っ っ v 識 


中 在 N 障 
テキ スト ボッ クス の 文字 列 を スク ロー ル す る 


setinterva1 (' 実 行 する 命令 ' , 命 令 を 呼び 出す 間隔 ) 
文字 列 . substring (抜き 出す 先頭 位置 抜き 出す 終了 位置 ) 
















テキ スト ボッ クス 内 に 、 メ ッ セ ー ジ を スク ロー ル さ せる スク リプ ト で す 。 ち ょ 
うど 、 電 光 掲 示 板 の よう な 感じ に な り ま す 。 仕組 み は 簡単 で す 。 文 字 列 を 表示 す 
る 位置 を 移動 させ る わけ で は な く 、 メ ッ セ ー ジ の 先頭 文字 を 切り 取っ て 、 そ れ を 
文字 列 の 後ろ に つなげ る と いう 動作 を 繰り 返す だ け で す 。 


敵 遇 - 個 弄 根 】 


N scroll form - Netscape 6 


。 フ ァイル (E) 編集 E) 表示 び ) 検索 G) ジャ ンプ ⑯) プッ クマ ー ク (B) AD ヘル プ ⑪ 
フォ ー ム 内 を 文字 列 が スク ロー ル し ます 








字 列 が スク ロー ル し ます 。 ス ピー ド も 変え られ ます 。 


N scrollform - Netscape 6 


|。 ファイル 編集 (ED) 表示 検索 ) ジャ ンプ G プッ クマ ー2(B) 222D ヘル プ ⑪ 
フォ ー ム 内 を 文字 列 が スク ロー ル し ます 





し ます 。 ス ピー ド も 変え られ ます 。 





文字 列 が ス 





N scrollform - Netscape 6 


。 ア イル (FE) 編集 (EC) 表示 び ) 検索 G) ジャ ンプ ⑯) ブッ クマ ー ク (B) 2 が D ヘル プ ⑪ 
フォ ー ム 内 を 文字 列 が スク ロー ル し ます 








ほす 。 文字 名 が スク ロー ル し ます 。 ス ピー ドモ も 
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に 生生 SA 汚 絡 89 Scralltext.html 


<htm1> 

<tit1e>scro11] form</ て it1e> 

<Script 1anguage="]avascr1pt"> 

< く !-- 

msg=" 文字 列 が スク ロー ル し ます 。 ス ピー ド も 変え られ ます 。": 


function scro11Text( ) { 


document.myForm.scro11 .value = msgi ーーーーーーーーーーーーーーーーー(3) 
msg = msg・substring(1,msg.1ength )+msg.substring(0,1), 一 一 ④) 
} 
7/--> 


</ SCript> 


<body on1oad="setTnterva1('scro11Text( ) ' , 200) " 
回 bgco1or="#fff8dc"> 


<h3> フ ォ ー ム 内 を 文字 列 が スク ロー ル し ます </h3> 
<hr /> 


<form name="myForm"> 
<1nput type="text" name="scro11" size="50" /> 」 0 


</form> 
</body> 
</ htm1> 


いい 控 に の 式 . 琴 応 敵 - 


この サン ブル で は 、「myForm」 と いう 名 前 の フォ ー ム 上 に 、「scrolll」 と いう 名 
前 を 付け た テキ スト ボッ クス を 配置 し て いま す (① の 箇所 )。 こ の 中 で 、 メ ッ セ ー 
ジ を スク ロー ル さ せま す 。 

Web ペ ー ジ が 読み 込ま れる と 、<body> タ グ の onload イ ベン ト ハ ンド ラ に 
よっ て 、setlnterval メ ソ ッ ド が 実行 され ます (⑧ の 箇所 )。 


これ は 、0.2 秒 (200 ミ リ 秒 ) ご と に scrolIText 関 数 を 呼び 出す と いう 処理 で す 。 
setInterval メ ソ ッ ド は 、 一 定 間隔 ご と に 特定 の 関数 や 命令 を 呼び 出す 場合 に 使 
用 され る メソ ッ ド で 、 次 の よう な 書式 に な り ま す 。 
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rna っ っ y 較 


setTnterva1( "実行 する 命令 , 命令 を 呼び 出す 間隔 ) 


scrolIText 関 数 で は 、 テ キス ト ボ ックス に 変数 msg に 格納 され た 文字 列 を 表示 
させ て いま す (③ の 箇所 )。 


ここ で は 、「myForm] と いう フォ ー ム の 「scroll] と いう テキ スト エリ ア の 値 
(value プ ロ パ ティ ) を 、msqg に 格納 され て いる 値 に 設定 し て いま す 。 次 に ④ の 部 
分 で す 。substring メ ソ ッ ド は 、 指 定 し た 文字 列 か ら 部 分 的 に 文字 を 抜き 取る メ 
ソ ッ ド で 、 以 下 の よ うな 書式 に な り ま す 。 


文字 列 . substring (抜き 出す 先頭 位置 抜き 出す 終了 位置 ) 


位置 の 指定 は 先頭 が 0 に な る の で 注意 し て くだ さい 。 こ の substring メ ソ ッ ド 
を 使っ て 変数 msg 内 の 文字 列 を 操作 する こと に より 、 あ た か も 文字 列 が スク ロー 
ル し て いる か の よう か な 効果 を 生み 出し ます 。 そ の 方 法 は 、 文 字 列 の 先頭 の 一 文字 
を 、 文 字 列 の 最後 に 移動 する 動作 を 繰り 返す の で す 。 

まず 、 次 の よう な 記述 に より 変数 msg 内 の 文字 列 の 2 文字 目 か ら 文 字 列 の 最後 
まで を 取り 出し ます 。 


この 後ろ に 、 以 下 の 記述 で 取り 出さ れ た 文字 列 の 1 文字 目 を 連結 し ます 。 


つま り 文 字 列 の 先頭 文字 を 結合 する こと で 、2 文 字 目 が 先頭 に な り 、 文 字 列 全 
体 が 1 文字 ずつ ずれ た よう な 状態 に な り ま す 。 

その 文字 列 は 変数 msqg に 格納 され 、 再 び setlInterval メ ソ ッ ド に よっ て 0.2 秒 
後に scrolIText 関 数 が 呼び 出さ れ ま す 。 今度 は 1 文字 分 すれ た 文字 列 が 表示 され 
る の で 、 左 に 移動 し た よう に 見 えま す 。 こ れ が 繰り 返さ れる こと に よっ て 、 文 字 
列 が 右 か ら 左 に スク ロー ル し て いる よう に 見 える の で す 。 
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msg 0 1 88 4 567 8| 


| substring を 使っ て 切り 出し 










1234567 フ 7 8| 


msg.substring(0.1) msg.substring(1.msg.length) 


給 1 t っ 1 
les45e7g|+ 回 
msg.Substring(1.msg.length) msg.substring(0.1) 


文字 を 接続 し 、 添 字 を 振り 直す 


msg |1 234567 問 


最初 に 戻り 繰り 返し 


スク ロー ル さ せる 速 さ の 変更 に は 、2 つ の 方 法 が あり ます 。 ま ず 、 抜 き 出し て 
最後 に 付け 足す 文字 列 を 2 バイ ト ( 全 角 の 1 文字 ) 単 位 に する 方 法 で す 。 次 の よう な 
記述 に な り ま す 。 


また 、 関 数 を 呼び 出す 間隔 を 変化 させ る こと に よっ て も 、 さ ま ざ ま に スピ ー ド 
を 変え られ ます 。 





うう 1 = 


INa っ っ v 識 


11.2 隊 い 国 。 - 障 * 陣 
育 景色 を ハイ ライ ト さ せる 


document.getE1ementByTd( "エレ メン ト 名 ") . sty1e . 
backgroundCo1or 


マウ スカ ー ソ ル が 何 か に ポイ ント し た と き 、 い ろ い ろ な イベ ント が 起こ る と 、 
ユー ザー が 非常 に イン タラ クティ ブ に 感じ る Web ペ ー ジ に な り ま す 。 こ の よう 
な Web ペ ー ジ の 実現 に は イメ ー ジ を 切り 替え る 方 法 も あり ます が 、 ポ イン ト し 
た も の の 背景 色 を 変え る こと で も 実現 で きま す 。 








明代 錠 まっ 人 い 導 


強 HightLight Text - Microsoft Imternet Explorer 


ファ イル (FE) 編集 GE) 表示 W) お 気 に 和 D⑱' ウール ① へ ヘルプ 員 


ハイ ライ ト さ せる 


Menu item 1 
Menu item 2 


N 


当 HiehtLieht Text - Microsoft Internet Explorer 


ファ イル (E) 編集 (EC) 表示 ) お 気に入り ウー ル ① ヘル プ ⑪D 


ハイ ライ ト さ せる 








マウ スカ ー ソ ル が 重なっ た ら 、 
背景 の 色 が 変わ る 
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7 隊 EYe 記 hightlighttext.html 


<htm1> 
<tit1e>HightLight Text</ て ュ ト 1e> 
<body bgco1or="#FfFf8dc"> 
<5scrtpt 1anguage="]avascript"> 
く ! -- 
function changeBgco1or(target, co1or){ ーーーーーーー-(]) 
document.getE1ementByTd(target) . sty1e .backgroundCo1or=co1or: 
} 
7/--> 
< く / Script> 
<h3> ハ イラ イト させ る </h3> 
<hr /> 
<tab1e width="200"> 
<tr> 
<td id="str1" onmouseover="changeBgcolor('str1'。 '#00ffff')" 
回 onmouseout="changeBgco1or( "str1'。 '#fff8dc')"> 
Menu item 1 
</td> 
< く /t エ > 
< く t エ > 
<td id="str2" onmouseover="changeBgco1or('str2', '#00ffff' )" 
回 onmouseout="changeBgcolor('str2'。 '#fff8dc')"> 
Menu item 2 
</td> 
< く /t エ > 
</table> 
</body> 
</htm1> 





くま 用 2 洒 


この サン プル で は 、<td> 要 素 に 囲ま れ た 部 分 の 文字 列 の 背景 色 を 、 マ ウス の 
カー ソル が 重なっ た と き に 変更 し て いま す 。 ま た 、 マ ウス の カー ソル が 離れ る と 
きき に 、 文 字 列 の 背景 色 を 元 に 戻し こい ます 。 

育 景色 を 変更 する 部 分 は 、① の 部 分 の changeBgcolor 関 数 に 記述 され て いま 
す 。changeBgcolor 関 数 は 2 つ 引数 を 取り ます 。 1 つつ 目 が 対象 と な る HTML 要 
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素 の 名 前 、2 つ 目 が 変更 し た 後 の 背景 色 の 色 で す 。 

この サン プル で は IE5 以 降 と NN6 に 特 化し て いる た め 、getElementByld メ 
ソ ッ ド を 用 いて いま す 。getElementByld メ ソ ッ ド は DOM(Document 
Object Model) 仕 様 に 定義 され て いる メソ ッ ド で 、 文 章 中 か ら id を 基 に オブ ジ 
ェクト を 返す メソ ッ ド で す 。getElementByld メ ソ ッ ド は 以下 の よう な 書式 に 
な り ま す 。 


document オ ブ ジ ェクト ・.getE1ementByTd( エ エレメント) 


エレ メン ト に は 、id 属 性 に 指定 し て いる 属性 の 名 前 を 指定 し ます 。 

この メソ ッ ド に より 返さ れる オブ ジェ クト の スタ イル を 変更 する こと で 、 痛 景 
色 を 変更 し て いま す 。 

背景 色 の 変更 は 、 背 景色 を 表す ブロ バテ ィ に 対し て カラ ー 名 か 16 進 の カラ ー コ 
ー ド を 代入 する こと に より 行い ます 。 背 景色 の プロ バ パティ は 、 以 下 の よ うに 指定 
する こと が で きま す 。 


document.getElementById( "エレ メン ト 名 " ) . style .backgroundCol1or 
背景 色 を 変更 する の は カー ソル を 重ね た と き (onmouseover イ ベン ト ハ ンド 
ラ ) と 、 カ ー ソ ル が 離れ た と き (onmouseout イ ベン ト ハ ンド ラ ) に 行い ます 。 こ 


れ ら の イベ ント ハン ドラ で changeBgcolor 関 数 を 呼び 出し 、 色 を 引数 に 与え る 
こと に より ハイ ライ ト を 実現 し て いま す 。 
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枠 線 を ハイ ライ ト さ せる 





オブ ジェ クト .borderCo1or= 色 


「11-2 背景 色 を ハイ ライ ト さ せる 」 で 解説 し た よう に 、 マ ウス カー ソル を 何 か 
に ポイ ント し た と き に 、 い ろ い ろ な イベ ント が 起こ る と 、 ユ ー ザ ー が 非常 に イン 
タラ クティ ブ に 感じ る Web ペ ー ジ を 作る こと が で きま す 。 今度 は 、 イ メー ジ の 
枠 線 を 表示 する よう に し て み ま す 。 


KU: 拓 > 205, 放 品 / 


THighlight Border - Netscape 6 同 回 四 | 


。 アイル 編集 (E) 表示 検索 ⑮) ジャ ンプ (⑧ プッ クマ ー ク (は 222D ヘル プ (⑪ 
ハイ ライ ト ボ ー ダ ー 


9 * 
2 
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Hiehliht Border - Netscape 6 
|。 アイ ル (F) 編集 E) 表示 検索 ⑤) ジャ ンプ (G) ブッ クマ ー ク (B) タ 22(D ヘル プ ゆ 


ハイ ライ ト ボ ー ダ ー 








マウ スカ ー ソ ル が イメ ー ジ 図 の 上 





に な る と 桁 線 が 表示 され る 
旨 OH CE hightlightborderhtml 
党 <htm1> 
の 
内 <tit1e>High1ight Border</t ュ 1e> 
ma <sty1e type="text/csS"> 
・borderimage{ border:1px solid white:+ 
| </ sty1e> 


<script 1anguage="]avascript1.2"> 
く !-- 
function high1ightBorder(which, co1or ){ 
if (document.a11 | | document .getE1ementByTd){ 


which . sty1e . borderCol1or=co1or ーーーーーーーーーーーーーーー 


} 

7/--> 

</ scr1pt> 

<body bgco1or="# 和 ff8dc"> 
<h3> ハ イラ イト ボー ダー</h3> 
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<hr /> 
<1mg Src="1mages/1mg1.g1f" c]1ass="borderimage" 
回 onmouseover="high1ightBorder(this , '#ffoooo')" 
軒 onmouseout="high1ightBorder(this, "#fff8dc')" /> 
<1mg Src="1mages/1mg2.g1f" c1ass="borderimage" 
回 onmouseover="high11ghtBorder(this, '#ffoooO' )" 
軒 。 onmouseout="high1ightBorder(this,'#fff8dc')" /> 
<br /> 
<1mg src="1mages/1mg3.g1f" c1ass="borderimage" 
回 onmouseover="high1ightBorder(this, '#ffoooo' )" 
団 。 onmouseout="high1ightBorder(this , "#fff8dc')" /> 
<1mg Src="1mages/1mg4.g1f" c1ass="borderimage" 
回 onmouseover="high1ightBorder(this , '#ffoooo')" 
団 。 onmouseout="high1ightBorder(this, "#fff8dc')" /> 
</body> 
</htm1> 





IL 人 あ 


この スク リプ ト で は 、 マ ウス カー ソル が イメ ー ジ に 重なっ た と き に 、 イ メー ジ 
の 周り に 枠 を 出す 処理 を 行っ て いま す 。Web ペ ー ジ 上 に は 4 つの イメ ー ジ が 配置 
され て お り 、 そ れ ぞ れ onmouseover イ ベン ト ハ ンド ラ と 、onmouseout イ ベ 
ント ハン ドラ に より highlightBorder 関 数 が 設定 され て いま す 。 そ の た め 、 マ 
ウス カー ソル が イメ ー ジ に 重なっ た と き と 、 マ ウス カー ソル が イメ ー ジ か ら 外 れ 
た と き に イベ ント が 発生 し 、highlightBorder 関 数 が 呼び 出さ れ ま す 。 

highlightBorder 関 数 は 、2 つ の 引数 を 必要 と し ます 。 1 つづ 目 は 枠 線 を 変更 す 
る オブ ジェ クト 、2 つ 目 は 枠 線 の 色 で す 。highlightBorder 関 数 で は 引数 で 与え 
られ た オブ ジェ クト の 枠 線 を 指定 され た 色 で 変更 し ます 。 そ の た め 、 呼 び 出し 側 
で オブ ジェ クト を 指定 する 必要 が あり ます 。 

ここ で 指定 し て いる の は this と いう キー ワー ド で す 。 こ れ は 「 こ の オブ ジェ ク 
ト 」 と いう 意味 な の で 、 呼 び 出 し た イメ ー ジ を 指定 し て いる こと に な り ま す 。 

枠 の 色 は borderColor プ ロバ ティ に 色 を 指定 する こと に より 変更 する こと が 
で きま す 。 そ の た め 、 受 け 取っ た オブ ジェ クト (which) の 下 の style.border 
Color を 変更 する の で 、① の よう な 記述 に な り ま す 。 

onmouseover イ ベン ト ハ ンド ラ の と き に 赤 (#ff0000) に 変更 し 、onmou 
seout イ ベン トバ ハンドラ の と き に 背景 色 (#fff8dc) に 変更 し て いま す 。 そ の た め 、 
マウ スカ ー ソ ル が 重なっ た と き に 枠 線 が 見 える よう に な り ま す 。 
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弄 ド 末 


1 文字 ずつ 表示 する 


t1merTID = setTimeout (“printChar( )", 呼び 出す 間隔 ) 


document.1ayers オ ブ ジ ェクト 


document .getE1ementByTd オ ブ ジ ェクト 











1 文字 ずつ 表示 され て いく と いう スク リプ ト で す 。 タ イプ ライ タ で 入力 し て い 
る よう な 究 囲 気 を 作り 出す こと が で きま す 。 


| 


当 printChar - Microsoft Iternet Explorer 
フイ ル F) 編集 EC) 表示 ) お 気に入り (& ぬ ) ツー ル ① ヘル プ ⑪ 


1 文字 ずつ 表示 する 





H 





He 

| Hel | 
| Hell | 

| Hello | 
| Hello J | 


| Hesllo Ja | 















| Hello Jav | 

| Hello Java | 

| Hello JavaS | 

| Hello JavaSc | 

| Hello JavaScr | 

| Hello JavaScri | 

| Hello JavaScrip | 
| Hello JavaScript | 
| Hello JavaScript? | 
1 文字 ずつ 


順番 に 表示 Hello JavaScript 
され て いく 
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生 肌 -) 計 る printchar.html 


<htm1> 
<tit1e>printChar</ 上 ュ ト 1e> 


<Script 1anguage="]avascript"> 


く !-- 


Var =0, PrintStr: 


Var msg = "He11o ]avaScript?1": 


Tunction printChar( ){ 


} 


3f( >msg・1ength){ 一 ーー ーー 一 --① 


c1earTimeout(timerTD) 
} 
else{ 
if(document .1ayers ) { ーーーーーーーーーー 一 一 (②) 
PrintStr = msg.substring(0,1)j 
document.sText.document.open( ) 
document.sText.document .write(printStr) 
document.sText.document.c1ose( ) 
} 
else if(document.getE1ementByTd){ ーーー 一 一 -(③) 


PrintStr = msg.substring(i,+1 ) : 
var ob] = document.createTextNode(printStr) 
document.getE1ementByTd("sText" ) .appendChi1d(ob]) 
+ 
EE 


timerTD = setTimeout( "printChar( )", 200) : ーーーーーーー④ 


//--> 

</Script> 

<body on1oad="printChar( ) " bgco1or="#ffT8dc"> 
<h3>1 文 字 ず つ 表 示す る </h3> 

<hr /> 


<div id="sText" sty1e="position:absolute"></Div> 


</body> 
</htm1> 


3 日 9 
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この サン ブル で は 、 変 数 msg に 格納 され た 文字 列 を 1 文字 ずつ 表示 し ます 。 ス 
クリ プ ト は 、Web ブ ラウ ザ に よっ て 処理 を 変え る よう に し て いま す 。NN4 で は 
表示 する た め の レ イヤ ー を 用 意 し 、 そ こ に 1 文字 ずつ 文字 列 を 増やし て いき 、 IE5 
以上 と NN6 で は 、 レ イヤ ー に 対し て 、1 文 字 ず つ 追 加 し て いく こと で 実現 し て い 
ます 。 

1 文字 ずつ 増やし 、 レ イヤ ー に 表示 する 機能 は printChar 関 数 に 実装 され て い 
ます 。 ス クリ プ ト の フロ ー は 、 次 の よう に な り ま す 。 


printChar 関 数 の 呼び 出し 


ョ 終了 
変数 msg に て いる 文字 超え て いる 

列 の 長 さ を 超 えて いな いか どう か 
超え て いな い 
document.layers が 動作 する か 
どう か 







する 


変数 msg 内 の 文字 列 の 先頭 | 


レイ ヤー に 表示 する 


変数 msg 内 の 文字 列 の 文字 | 


レイ ヤー に 文字 を 追加 する 


し な い 






locument.getElementByld 
作 す る か どう か 


し な い 


変数 {を 増加 する 


アーーーーー ニ ーー ニー ニー ニー ニー ニニ ーー ニー ニー ニー ニー ニー ニー ニー ニニ ーー ニニ ーー ニー ニー ニニ ーー ニー ニー ニー ニー ニー ニー ニニ ーー ニー ニー ニー ニー ニー ニー ニーー こ ユ 


printChar 関 数 で は 、 変 数 msg の 長 さ を length プ ロ パ ティ を 用 いて 調べ 、 変 
数 1 が その 長 さ を 超え て いな いか どう か 調べ ます (① の 箇所 )。 変 数 i は 、 文 字 列 の 
何 文字 目 ま で を 表示 する か を コン トロ ー ル する 変数 で す 。 こ こ で 超え て いる 場合 
に は 、 後述 する タイ マー に よる printChar 関 数 の 呼び 出し を clearTimeout メ ソ 
ッ ド で 止め る こと に より スク リプ ト 処 理 を 終了 し て いま す 。 変数 が 文字 列 の 長 さ 
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を 超え て いな い 場 合 に は 、 文 字 列 を 表示 する 処理 を 行い ます 。 

NN4 の 処理 は 、② の 部 分 の if 文 で 真 に な っ た 場合 に 行わ れる 処理 で す 。NN4 
か どう か を 調べ る に は 、document.layers オ ブ ジ ェクト が 動作 する か どう か で 
調べ て いま す 。 こ の オブ ジェ クト は NN4 で し か 動作 し な いた めで す 。 こ の if 文 が 
真 に な っ た 場合 に は 、 表 示 用 の 文字 列 の 生成 を 行い ます 。 こ れ は 、 変 数 msg か ら 
変数 文字 分 だ け を 切り 出す と いう 処理 に より 行い ます 。 


変数 msg に 
格納 され て 
いる 文字 列 








変数 i は だ ん だ ん と 増え て いく の で 、 切 り 出 され る 文字 列 が 長く な っ て いき ます 。 
この よう に し て 生成 し た 文字 列 を 、Web ペ ー ジ 内 の レイ ヤー に 対し て 書き 出す 
こと に より 、1 文 字 ず つ 表 示す る 部 分 を 実行 し ます 。 

IE5 以 上 と NN6 を 対象 と する 場合 に は 、document.getElementByld オ ブ ジ 
ェクト が 動作 する か どう か で 調べ ます (③ の 箇所 )。 こ の if 文 が 真 に な っ た 場合 の 
処理 は 、NN4 の も の と は 異な っ て いま す 。NN4 で は 1 文字 ずつ 増え た 文字 列 を 生 
成 し 、 そ の 文字 列 を 表示 し て いま し た が 、 こ ちら の 処理 で は 、 文 字 を 1 つ ず つ 追 
加 す る こと に より 行い ます 。 

この と き に は createTextNode メ ソ ッ ド に より 、 番目 の 文字 が 格納 され た ノ 
ー ド (オブ ジェ クト ) を 作成 し 、 そ れ を レイ ヤー の 部 分 に 追加 する と いう 実装 を し 
て いま す 。 ノ ー ド を 追加 する に は appendChild メ ソ ッ ド を 用 いま す 。 こ の よう 
な 実装 に より ij 番目 の 文字 を 追加 し ます 。 

printChar 関 数 自体 は 、1 回 呼び 出さ れる と 変数 ij が 1 つ 増 える の で 、1 文 字 ず 
つ 表 示す る 文字 列 が 増え る こと に な り ま す 。 こ れ を 連続 的 に 増やす に は 、print 
Char 関 数 の 中 で 一 定時 間 後に 再度 printChar 関 数 を 呼び 出す よう に セッ ト し ま 
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ina っ っ v 開 


す 。 て この 呼び 出し に は 、setTimeout メ ソ ッ ド を 用 いて いま す 。 setTimeout メ 
ソ ッ ド は 、 指 定時 間 後 に 1 回 だ け 命 令 を 呼び 出す 機能 を 持っ て いま す 。 


上 1merTD = getTimeout ("printChar( )", 200): 


スク リプ ト で は 200 ミ リ 秒 ご と に printChar 関 数 を 呼び 出し て いま す (④ の 箇 
所 )。 前 述 し た よう に 、 タ イマ ー を クリ ア す る に は clearTimeout メ ソ ッ ド を 使 
いま す 。 こ の と き 止 め る タイ マー を 識別 する た め に 、setTimeout メ ソ ッ ド で 設 
定 し た 変数 timerIlD を 引数 と し て 与え ます 。 


| 
文字 化け へ の 対処 


JavaScript 内 で ダイ アロ グ ボ ックス や ステ ー タ スバ ー に 日 本 語 を 表示 す 
る と 、 文 字 化け を し て し まう こと が あり ます 。 こ れ は 、 日 本 の 漢字 コー ド が 
2 バイ ト で ある こと に 起因 し ます 。Web ブ ラウ ザ は 、 う まく 漢字 を 認識 する 
こと が で き な い の で す 。 さ ら に 日 本 語 の 文字 コー ド に は JIS、Shift-」IS 
(SJIS)、EUC(Extended UNIX Code) の 3 種類 が ある た め 、 い っ そう 問題 
が 複雑 化し て いま す 。 

も し ダイ アロ グ ボ ックス 内 な ど に 表示 し た 文字 が 化け て し まっ た 場合 は 、 
化け て し まう 文字 の 前 に 「\] を 入れ て みて くだ さい 。 た と えば 、「 表 示 」 と い 
う 文 字 を 表示 させ た いと き に 「 示 」 の 字 が 化け て し まう と し ます 。 その と き は 、 
「 表 \ 示 」 と し て みる の で す 。 な お 、 環境 に よっ て は 「\」 (円 記号 ) は 「U( バ ッ ク 
スラ ッシュ ) と 表示 され る 場合 が あり ます 。 

な お 、<meta> タ グ を 用 いる と 、 自 動 的 に 日 本 語 コ ー ド を 切り 替え て くれ 
ます 。 た と えば 、 次 の よう に 記述 する と 、JIS で 日 本 語 エ ンコ ー ド し ます 。 


<meta ht 上 tp-@Gqui マ ="ConEent-mType" Conten セ = "ex /hm1 : 
団 charget=igo-2022-Jp" /> 


これ だ け コ ンピュータ が 発達 し た 現在 で も 、 依 然 と し て 日 本 語 処理 の 問題 
は 解決 され て いま せん 。 特 に JavaScript や CSS な ど で は いく つか の 問題 が 
報告 され て いま す 。 し か し 、IE4 以 降 で は それ ら の 問題 は か な り 解 決 さ れ て 
き て いま すし 、NN4.06 以 降 で も Unicode に 対応 し た こと で 、 徐 々 に 環境 
は 改善 に 向かっ て いま す 。 
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3 


11-5 較 識 倍 い 想 。 較 ょ 喘 
文字 を 移動 する 


オブ ジェ クト ・.sty1e.top = Y 座 標 
オブ ジェ クト . sty1e .1eft = X 座 標 
オブ ジェ クト ・.top = Y 座 標 
オブ ジェ クト .1eft = X 座 標 



























Web ペ ー ジ に 動き が ある と 、 目 を 惹き 付け る も の が あり 、Web ペ ー ジ が 華 や 
か に な り ま す 。 ア ニメーション GIF な ど で 実 現す る と いう 手 も あ り ま す が 、 テ キ 


スト を 動か す 程度 な ら ス クリ プ ト で 実現 する こと が で きま す 。 


D SS PL A Y 









NN move text1 - Netscape 6 周回 四 


> フイ ル ( 編集 (E) 表示 (⑦ 検索 ⑮) ジャ ンプ ⑯⑬) ブッ ウマー が (B) タス 2(①D ヘル プ い 


Va 9 上 ! 












NN move text1 - Netscape 6 同 回 図 


> カイル) 編集 (E) 表示 び 検索 ⑤) ジャ ンプ ⑬) ブッ クマ ー ク (8) が D ヘル プ ⑪ 










NN moye text1 - Netscape 6 同 回 図 


= ブイ ル (F) 編集 GE) 表示 び ) 検索 ⑤) ジャ ンプ (G) ブッ クマ ー ク (B) AD ヘル プ ⑬ 








画面 の 外 か ら 文字 が 
現れ 、 画 面 の 173 下 
に 移動 し て き て 止ま 
る 
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INa っ っ v 較 


0 訂 当 貞 導 全教: movetext.html 


<htm1> 

<tit1e>move tex モ 1</t ュ 1e> 

<script 1anguage="]avascr1pt"> 

く !-- 

Var start y = -30: 一 ーー ーーーーーーーーーーーーーーーーーーー 一 一 一 (②) 
Var step=2} 

var 1ast y, posi y, timerTD: 

var static x = 200: 


PoS y = start 3 ーーーーーーーーーーーーー ーーーーーーーーー 一 ーーーーーー 一 一 (3③) 


function initPosition( ){ 


if(document.getE1ementByTd){ 一 -(④ 


3f(document.a11 ){ 
1ast y = document.body.c1ientHeight/3: ーーーーーー-③ 


} 
e1se{ 

1ast y = innerHeight/3: ーー 一 (⑤⑧ 
} 


document.getE1ementByTd( "subtit1e" ) . style.top = start_yj 
document.getE1ementByTd( "subtit1e" ) .sty1e.1eft = static_xj 
了 
e1se'*f(document。]ayers){ 一 ーー ーーーーーーーーーーーーーーーーーーー⑦) 
1ast_y = innerHeight/3: 
document.subtit1e.top = start y: 
document. subtit1e .1eft = static_ X: 
} 
moveText( ) 
function moveText( ){ 
if( posi y > 1ast y ){ 
c1earTimeout(t1merTD) : 
} 
else{ 
Pos1 y += Stepj 
if(document.getE1ementByTd){ 


document.getE1ementByTd ⑧ 
に | ("subtit1e" ) . sty1e .top = posi yj 
N ノ 


} 


else if(document.1ayers ){ 


document.subtit1e .top = pos1 y: ーーーーーーーー(⑨ 
+ 


timerID = setTimeout( "moveText( )", 10): 


} 

7/=-> 

< く / scr1ipt> 

<body on1oad="initPosition( )" bgco1or="#fff8dc"> 
<hs> 文 字 を 動か す </h3> 

<hr /> 


<div 1d="subt ュ t]e" 


回 、sty1e="position:abso1ute:font-sze:30px"> ーーーーーーーーー-① 


JavaScript!</div> 
</body> 
</htm1> 


有 M ES 由 1 上 な 


この スク リプ ト で は 、Web ペ ー ジ の ロー ド 時 に 上 か ら テ キス ト が 現れ 、Web 
ブラ ウザ の 表示 領域 の 173 だ け 落 ち て きた ら 止 まり ます 。 

移動 し て いく 文字 部 分 は 、<div> 要 素 に より レイ ヤー を 作成 し て いま す 。 id 属 
性 と style 属 性 を 宣言 し 、 style 属 性 に は 「position:absolute」 を 記述 し て いま す 。 
これ は NN4 で <div> 要 素 を レイ ヤー と し て 認識 させ る た めで す 。 ま た 、 文字 を 大 
きく する た め に 「font-size:30px」 と 記述 し て いま す (① の 箇所 )。 

スク リプ ブ ト 部 分 は 大 きく 2 つ に 分 か れ て いま す 。1 つ は Web ペ ー ジ ロー ド 時 に 
行わ れる 初期 設定 部 分 、 も う 1 つ は 実際 に 文字 を 動か す 部 分 で す 。 

Web ペ ー ジ ロー ド 時 に は 、 各 種 の 値 の 設定 と 、 文 字 を 移動 させ る と いう こと 
を 行っ て いま す 。 値 は 、 次 の も の を 設定 し て いま す 。 








In) っ v 半 


変数 start_y は 、② の 箇所 の よう に 最初 「-30」 に 設定 され て いる の で 、Web ブ 
ラウ ザ の 表示 領域 外 に ある こと に な り ま す 。 変数 last_y は 、Web ペ ー ジ 表示 領 
域 の 高 さ の 1/73 が 入る よう に な っ て いま す 。 

Web ペ ー ジ の 表示 領域 は IE と NN で は 格納 し て いる プロ バ パティ が 異な る の で 、 
initPosition 関 数 内 で それ ぞ れ 取得 し て いま す 。 変数 static_ x は 、 今 回 は 上 か ら 
落ち て くる だ け な の で 、 固 定 で 「200」 と し て いま す 。 変数 step は 、 文 字 を 移動 さ 
せる 間隔 で す 。 こ れ を 小さ くす る と 文字 が 滑ら か に 移動 し ます 。 ま た 変数 posi_y 
は 、 文 字 列 の Y 座 標 を 格納 する 変数 で す 。 初 期 位 置 は 変数 start_y と 同じ な の で 、 
③ の よう に 値 を 代入 し て いま す 。 

ここ まで の 動作 で 、 表 示 領 域 の 取得 以外 は Web ペ ー ジ の 読み 込み の 時 点 で 行 
われ て いま す 。 

Web ペ ー ジ が すべ て 読み 込み 終わ っ た ら 、<body> 要 素 の onload イ ベン ト 
ハン ドラ で initPosition 関 数 を 呼び 出し ます 。initPosition 関 数 で は 、 文 字 列 を 
含む <div> 要 素 に 対し て 値 を 与え て いま す 。<div> 要 素 の 位置 の 設定 は 、NN4 の 
処理 と 、IE5 以 上 、NN6 の 処理 方 法 が 異な り ま す の で 、 ブ ラウ ザ を 判定 し て 、 そ 
れ ぞ れ 分 け て 記述 し な けれ ば な り ま せん 。 

IE5 以 上 と NN6 で は DOM が 実装 され て いる の で 、document.getElement 
Byld オ ブ ジ ェクト が 動作 し ます 。 そ の た め 、④ の if 文 が 真 に な り 実 行 さ れ ま す 。 
この スク リプ ト で は 、Web ブ ラウ ザ の 表示 領域 の 高 さ を 取得 し 、 文 字 が 動く 量 
を 決め て いま す 。 し か し IE と NN で は 、 こ れ ら を 取得 する プロ バテ ィ が 異な る の 
で 、 さ ら に document.all オ ブ ジ ェクト が 動作 する か どう か を 調べ て いま す 。 
IE5 以 上 で は document.all オ ブ ジ ェクト が 動作 する の で ⑤ の 部 分 が 、NN6 で は 
⑥ の 部 分 が 実行 され ます 。Web ブ ラウ ザ の 表示 領域 が 取得 で きた 後 で 、 そ れ ぞ 
れ X 座 標 、Y 座 標 を 与え ます 。 

NN4 で は 、document.Iayers オ ブ ジ ェクト が 動作 する の で 、⑦ の if 文 が 真 に 
な り 実 行 され ます 。NN4 で も innerHeight プ ロバ パテ ィ か ら Web ブ ラウ ザ の 表示 
領域 の 高 さ を 取得 し 、top プ ロバ ティ 、left プ ロ パ ティ を 用 いて 文字 列 に 初期 状 
態 の 位置 を 与え て いま す 。 

ここ まで の 初期 設定 が すべ て 終了 する と 、initPosition 関 数 内 で moveText 
関数 を 呼び 出し ます 。moveText 関 数 で は 、 最 初 に 文字 列 の 位置 が last_y を 超え 
て いな いか どう か チェ ッ ク し ます 。 こ こ で 超え て いる 場合 に は 、 後 述 す る タイ マ 
ー(timerID) を clearTimeout メ ソ ッ ド で 解除 し ます 。 

超え て いな けれ ば 文字 列 の 移動 を 行い ます 。 ま ず 、 最 初 に 変数 posi_y に 変数 
step を 足し 合わ せ 、 そ れ を 文字 列 の Y 座 標 に 代入 し ます 。 こ こ で の 文字 列 が 格納 
され た オブ ジェ クト は 表現 が 異な る た め 、 処 理 を 分 割 し て いま す 。 

IE5 以 上 と NN6 で は 、⑧ の 箇所 の よう に し て オブ ジェ クト を 指定 し top プ ロバ 
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SECTION 11-5 | 文字 を 移動 する 











ティ を 、NN4 で は ⑨ の 箇所 の よう に オブ ジェ クト を 指定 し top プ ロ パ ティ で Y 座 
標 を 指定 し ます 。 

最後 に 、 こ の 処理 が 繰り 返し 行わ れる よう に setTimeout メ ソ ッ ド で タイ マー 
を 設定 し ます 。 タ イマ ー は 後 で 解除 する こと が 可能 な よう に 、 変 数 timerlID で タ 
イマ ー 識 別 を 行い ます 。 タ イマ ー で は 10 ミ リ 秒 後に moveText 関 数 が 呼び 出さ 
れる よう に し て いま す 。 











T 1! P S 


ここ で 紹介 し た サン プル で は 縦 方 向 に 文字 を 動か し まし た が 、 横 方 向 に 文字 を 
動か すこ と も で きま す 。 左 横 か ら 横 方 向 に 文字 を 動か し た い 場 合 は 、pixelTop 
プロ パテ ィ の 代わ り に pixelLeft プ ロ パ ティ 、top プ ロ パ ティ の 代わ り に left プ 
パテ ィ を 用 いま す 
また 、 記 述 す る と き に は 、X 座 標 と Y 座 標 に も 気 を 付け る よう に し て くだ さい 
テキ スト と 画像 と 扱っ て いる も の は 違い ます が 、「11-7 画像 を 移動 する 」 で 左 横 
か ら の 移動 を 扱っ て いま す 





















































マヤ 文字 が 左 横 か ら 移 動 する 
















強 move text1 - Microsoft Imternet Explorer 


ファ イル (F) 編集 (E) 表示 ) お 気 ⑧。 ウー ル ① 


| 文字 を 動か す 










avaScript! 






革 move text1 - Microsoft Imternet Explorer 








ファ イル (FE) 編集 (E) 表示 ) お 気 に 入 D⑯) ウール ヘル プ ⑪ 





文字 を 動か す 





JavaScript! 
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ina っ っ yv 議 


11-6 





JavaScript を 使う と 、 文 字 列 の 大 き さ を 変更 する こと も で きま す 。 あ まり や り 
すぎ る と セン ス の よく な い Web ペ ー ジ に な り ま す が 、 ア クセ ント と し て 使う と 
よい か も し れ ま せん 。 こ の サン プル で は 文字 列 の 大 き さ の 変え 方 を 解説 し ます 。 













N|zopm text - Netscape 6 同 回 四 


| カイル) 編集 表示 V 検索 ジャ ンプ ③ プッ 2 マー ク (B) 22D へ ルプ ⑪ 
文字 の 大 き さ を 変え る 


JavaScript?! 


Nizoom text Netscape 6 


| アイ ル ( 編 集 (E) 表示 検索 ⑯) ジャ ッ プ (G) プッ 2 マーク (G) 222D ヘル プ ⑬ 
文字 の 大 き さ を 変え る 


回 
回 
四 


JavaScript?! 









NR] zoom text - Netscape 6 回 回 四 


| カイル 編集 表示 検索 ) ジャ ッ プ (⑬ プッ クマ ー ク ⑧) 22CD ヘル プ 
文字 の 大 き さ を 変え る 





JavaScript?! 


文字 の 拡大 と 縮小 
を 繰り 返す 
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00 NE 油 は 90 Zoomtext.html 


<htm1> 

<tit1e>zoom tex</t ュ ト ]e> 

<Scr1pt 1anguage="]avascript"> 

く !-- 

var 1, dstep, msg, msg2, timerTD: 
var step = 2 

ュ =105 

dstep = step: 


function zoomText( ){ 
if( i>go ){ 
dstep = -step: 


} 

if( <10 ){ 
dstep = step: 

} 


if(document.getE1ementByTd){ 一 ーー 一 -④) 
msg1 = ユ + "PX'j 
document.getE1ementByTd 
回 ("subtit1e" ) . sty1e .fontS1ze = msg1: 
} 


e1se 1f(document.1ayers ){ 一 一 (③) 


msg2 = "<div sty1e="font- 和 ami1y: 

回 Comic Sans MS: font-size:"+i+'px">JavaScript? 1</d1v>!: 
document[ "subtit1e"] .document.open( "text/htm1" ): 
document[ "subtit1e" ] .document.write(msg2) 
document[ "subtit1e" ] .document.c1ose( ) 


ュ +=dstep 
timerTD = setTimeout("zoomText( ) " 100) : 一 -(② 
+ 
7/--> 
</ Script> 
<body on1oad="zoomText( )" bgco1or="#f 和 ff8dc> 
<h3> 文 字 の 大 き さ を 変え る </h3> 
<hr /> 
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の 
m 
= 
放 に - | 


<div id="subtit1e" sty1e="position:absolute:top:80px"> - コ 
回 avaScript? 1!</div> (や ひ 
</body> 

</htm1> 


この サン ブル で は 「JavaScript?!] と いう 文字 列 を 周期 的 に 大 きく し た り 、 小 
さく し た り し て いま す 。 

今回 の サン プル で は 、IE5 以 上 と NN6 の 場合 は オブ ジェ クト の フォ ント サイ ズ 
を 変更 する 方 法 で 、NN4 で は レイ ヤー を 作成 し 、 そ の 内 容 を 書き 換え る こと に よ 
り 実 現し て いま す 。 レ イヤ ー は ① の 箇所 の よう に <div> 要 素 に より 生成 し て いま 
す 。NN4 で も 操作 で きる よう に 、id 属 性 と style 属 性 で 「position:absolute」 
と 宣言 し ます 。 

スク リプ ト 読 み 込み 時 に は 、⑧ の 部 分 で 以下 の 変数 を 設定 し て いま す 。 





変数 i は 、 実際 に 文字 列 の 大 き さ を 表し て いま す 。 変数 step は 、 文 字 列 が 大 き 
く な っ た り 小 さく な っ た りす る と き の 変 化 の 量 で す 。 今 回 は 2 ピク セル ご と に 大 
きく し た り 小 さく し た りす る の で 「2」 に な っ て いま す 。 変数 dstep は 変数 step に 
つい て 正負 を 考慮 し た も の で す 。 大 きく な る と き に は 変数 dstep は 正 に 、 小 さく 
な る と き に は 変数 dstep は 負 に な り ま す 。 

文字 列 の 大 き さ を 変え る 部 分 は 、zoomText 関 数 に 実装 され て いま す 。 
zoomText 関 数 で は 、 ま ず 文 字 の 大 き さ を 表す 変数 (の 大 き さ を 確認 し ます 。 今 
回 の サン プル で は 10 ピ クセ ル か ら 90 ピ クセ ル ま で 、2 ビ ピクセル ご と に 大 き さ が 変 
化し て いき ます 。 こ こ で 変数 ij が 90 を 超え た ら 、 変 数 dstep を 負 に する た め に 、 
変数 step に マイ ナス を 付け て 代入 し ます 。 ま た 変数 j が 10 を 下回っ た ら 、 変数 
dstep を 正 に する た め に 、 変 数 step を 代入 し ます (③ の 箇所 )。 

この 後 は 、IE5 以 上 と NN6、NN4 の 処理 は 異な り ま す 。 IE5 以 上 と NN6 で は 
document.ElementByld オ ブ ジ ェクト が 動作 する の で 、④ の 箇所 の if 文 の 中 に 
記述 され た 部 分 が 動作 し ます 。 こ の 中 で は 、 変 数 i に 「px」 と いう 文字 列 を 連結 し 
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た も の を 変数 msg に 与え て いま す 。 こ の 変数 を fontSize プ ロバ パテ ィ に 代入 する 
こと に より 、 フ ォ ン ト サ イ ズ を 変更 し て いま す 。 

NN4 で は レイ ヤー 内 の 文字 列 を 変更 する こと で 行い ます 。NN4 で は 
document.layers オ ブ ジ ェクト が 動作 する の で 、⑤ の 箇所 の 処理 が 実行 され ま 
す 。 こ こ で は <div> 要 素 を 用 い 、 さ ら に サイ ズ 指 定 は スタ イル シー ト に より 行っ 
て いま す 。 フ ォ ン ト の サイ ズ を 指定 し て いる の は font-size 属 性 で す 。 今 回 は 滑 
ら か に 文字 列 の 大 き さ を 変え る た め に スタ イル シー ト を 用 いて いま す が 、 
<font> 要 素 を 用 いて サイ ズ を 指定 し て も か まい ませ ん 。 こ の よう に 文字 列 を 作 
成 し 、 そ の 後 レ イヤ ー の ドキ ュ メ ント を 開き 、write メ ソ ッ ド で 生成 し た 文字 列 
を 記述 し ます 。 こ の 処理 が 終わ る と 文字 列 が 書き 直さ れ ま す 。 

それ ぞ れ 、 文 字 の サイ ズ を 変更 し た 後 は 、 変 数 i に 変数 dstep を 足し 合わ せ て 、 
次 の 処理 に 備え ます 。 次 の 処理 は ⑥ の 箇所 の よう に setTimeout メ ソ ッ ド に より 、 
100 ミ リ 秒 後に 再度 zoomText 関 数 が 呼び 出さ れる よう に し て いま す 。 こ うし て 
繰り 返し zoomText 関 数 を 呼び 出す こと に より 、 連 続 的 に 文字 列 の 大 き さ が 変わ 
っ て いき ます 。 

な お 、Macintosh 版 IE で は 、fontSize が サポ ー ト され て いな いた め 、 動 作 し 
ませ ん 。 


マサ ン ブ ル ス クリ ブ ト の 処理 の 流れ 












destep=-Step 


ic<10 


destep=step 


フォ ント の サイ ズ を 変更 する 





locument.layers 
どう か 






し な い 


表示 する 文字 列 の 生成 | 


レイ ヤー 内 の 書き 換え 


チ i に dstep 
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1TN ヨ っ っ v 較 


11-7 玉 い 隊 足下 


オブ ジェ クト .sty1e .top = X 座 標 
オブ ジェ クト .1eft = Y 座 標 
オブ ジェ クト .top = X 座 標 





Web ペ ー ジ に 動き が ある と 、 そ れ だ け で 華やか に 感じ る も の で す 。 文字 列 を 
動か す サ ンプ ル は [「11-5 文字 を 移動 する ] で すでに 紹介 し まし た 。 同じ よう に 、 
画像 を 移動 させ る こと も で きま す 。 


move ima le | 


IN っ っ v 較 


imers - Microweft jntermet Eplorer 同 に 
アイ ル G 6) 表 二 O お気 に 0⑯ ウー ル OD AM20D 


画像 を 動か す 





VSCTID( 


andbook 


VSCriDt 


ndbook 
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Ui 要 で を moveimage.html 


<htm1> 

<t ュ t1e>move 1mage</t ュ ト 1e> 
<Scr1pt 1anguage="]avascript"> 
< く !-- 


Var start x, static y, step, 1ast x, posi x, timerTD: 


function initPosition( ){ 
start x = -300: 
static y = 100j 
Step=2 
Pos1 x = start x: 
if(document.getE1ementByTd){ 
if(document.a11 ){ 
1ast_x = document.body .c1ientMidth/4: 


} 
else{ 

1ast x = innerMidth/4: 
上 


document.getE1ementById( "subtit1e" ) . sty1e .1eft = start xi: 
document.getE1ementByTd("subtit1e" ) .sty1e .top = static y: 
document.getE1ementByTd( "subtit1e" ) . sty1e .visib111ty = 
回 'visib1e': 

} 

ese if(document.1ayers ){ 
1ast x = innerMidth/4: 
document.subtit1e .1eft = start x: 
document.subtit1e.top = static y: 
document.1ayers[ "subtit1e"] .vis1bi1ity = 'visible': 

} 


moveTmage( ) 


function moveTmage( ) て { 
if( posi x > 1ast x ){ 
c1earTimeout(t1merTD) : 
} 
else{ 


Posi_ x += stepi 


た や ) 





ina っ っ y 議 


if(document.getE1ementByTd){ 
document .getE1ementByTd( "subtit1e" ) . sty1e.1eft = 





回 Posi Xi 

} 

else if(document.1ayers ){ 
document.subtit1e.1eft = pos1 x: 


} 


timerID = setTimeout( "moveImage()", 10)』 


} 

//--> 

</ script> 

<body on1oad= "initPosition( ) "bgcolor="#e6e6fa"> 
<h3> 画 像 を 動か す </h3> 

<hr /> 

<div id="subtit1e" 


回 sty1e="position:abso1utejvisibi1ity:hidden"> WO 
<1mg src="1mages/1ogo.g1f" width="300" hetght="200" /> 

</diV> 

</body> 

</htm1> 


この スク リプ ト で は 、Web ブ ラウ ザ の 左 横 か ら 画 像 を 移動 させ ます 。 ス クリ 
プ ト 自 体 は 、「11-5 文字 を 移動 する ] で 紹介 し て いる 文字 を 動か す ス クリ プ ト 
と ほとん ど 同 じ で 、 画 像 を 扱う た め に いく つか の 修正 を 加え て いま す 。 こ の スク 
リプ ト で も 、IE5 以 上 と NN6、NN4 で 処理 を 分 離し て いま す 。 

ます 画像 で す が 、<div> 要 素 で レイ ヤー を 作っ て 、 そ の 中 に 画像 を 配置 し て い 
ます 。 こ れ で レイ ヤー を 操作 する と 画像 も いっ し ょ に 動き ます 。 IE5 以 上 や NN6 
で は 直接 イメ ー ジ の オブ ジェ クト の 位置 を 操作 で きる の で す が 、NN4 で は 動作 し 
な いた め 、 画 像 を レイ ヤー 内 に 配置 し 、 レ イヤ ー を 動か す と いう 実装 を 行っ て い 
ます (① の 箇所 )。 

ここ で 、 画 像 を 扱う た め に 加え て いる の が 「visibility:hidden] で す 。 これ 
は 、「 こ の オブ ジェ クト を 表示 し な い ] と いう も の で す 。 な ぜ こ の 指定 を し て い 
る か と いう と 、 初 期 設 定 に より 画像 を Web ブ ラウ ザ の 非 表 示 領 域 に 移動 させ て 
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いる の で す が 、 画 像 の 場合 は ロー ド に 時 間 が か か っ た り 、 処 理 が 遅い た め 最 初 に 
一 瞬 見 えて し まう 可能 性 が あり ます 。 そ こ で 、 最 初 は レイ ヤー を 見 えな いよ うに 
し て お き 、 画 像 の 移動 が 終わ っ た 段階 で 表示 する と いう 処理 を 行っ て いま す 。 こ 
れ は 、 文 字 列 に 対し て 同様 の 記述 を し て も 問題 あり ませ ん 。 

次 は スク リプ ト に つい て で す 。 ス クリ プ ブ ト は 大 きく 分 け て 、 初 期 設定 と 画像 を 
移動 させ る 部 分 の 2 つ に 分 か れ て いま す 。 初 期 設 定 の initPosition 関 数 で は 、 画 
像 の 移動 位置 や 移動 間隔 な ど を 変数 で 設定 し て いま す 。 さ ら に 画像 を 初期 位置 に 
移動 させ て いま す 。 初期 位置 は 変数 start_x が 「-300」 ビ クセ ル と な っ て いる の で 、 
Web ブ ラウ ザ の 表示 領域 外 の 左側 に 隠れ て いる こと に な り ま す 。 

移動 の 方 法 は 、 す で に P.346 で 解説 し た と お り で す 。 移 動 させ た 後 、 非 表示 に 
な っ て いる レイ ヤー を 表示 し ます 。 表 示 の 切り 替え に は visibility プ ロ パ ティ を 
用 いま す 。 オ ブ ジ ェクト の 指定 が Web ブ ラウ ザ で 異な る た め 、 そ れ ぞ れ 次 の よ 
うに し て いま す 。 


人 @IE5 以 上 、NN6 





@NN4 





画像 の 移動 が 終了 し た ら 、movelmage 関 数 を 呼び 出し ます 。 画像 の 移動 は 、 
文字 列 の 移動 と まっ た く 同 じ で す の で 、 動 作 の 仕組 み は 「11-5 文字 を 移動 する 」 
を 参照 し て くだ さい 。 


症 I P S 


ここ で 紹介 し た サン プル で は 、 模 方 向 に 動か し まし た が 、 縦 方 向 に 動か すこ と 
も で きま す 。 縦 方 向 に 動か し た い 場 合 は 、pixelLeft プ ロ パ ティ の 代わ り に 
pixelTop プ ロ パ ティ 、lefttop プ ロ パ ティ の 代わ り に top プ ロ パ ティ を 用 いま 
の 

また 、 記 述 す る と き に は 、X 座 標 と Y 座 標 に も 気 を 付け る よう に し て くだ さい 。 
縦 方 向 か ら の 移動 は 、「11-5 文字 を 移動 する 」 で 扱っ て いま す 。 
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INa っ っ v 識 


11-8 纏い 胡 Hi 隊 町 
画像 の 拡大 ・ 縮 小 


オブ ジェ クト .setAttribute = (名 前 , 値 ) 


「11-6 文字 の 拡大 ・ 縮 小 ] で は 、 文 字 列 を 拡大 ・ 縮 小さ せま し た 。 JavaScript 
で は 文字 列 だ け で な く 、 画 像 も 拡大 ・ 縮 小 す る こと が で きま す 。 画像 で も 、 才 り 
や りす ぎる と セン ス の 悪い Web ペ ー ジ に な っ て し まい ます が 、 ち ょ っ と し た ア 
クセ ント と し て 使う と 、 か な り よ い 感 じ を 与え る こと が で きま す 。 


し Ak- 69 VA . We 』 









zoom imae - Netscape 6 各回 加 


。 アイ ル (上 編集 (E) 表示 検索 ⑤) ジャ ッ プ (⑬ プッ クマ ー ク (⑧) 92 が (D ヘル プ ⑪ 
画像 の 大 き さ を 変え る 











avScriht 


遇 andbook 





ayaScriDt 


呈 andbook 


aVaSCriDt 


ndbook 


画像 が 拡大 ・ 縮 小 
を 繰り 返す 
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0 有 で く 二 っ た さい 世 zoomimage.html 


<htm1> 

<tit1e>zoom 1mage</ て 1 て 1e> 
<Sscript 1]anguage="]avascript"> 
く !-- 

var 1, dstepj 

var iheight = 200: 

var iwidth = 300』 

var step = 0.01: 

=4 0: 

dstep = stepj 


function zoomImage( ){ 
HE( 24。5 
dstep = -step: 
+ 
if( <0.5 ){ 
dstep = step: 


if(document.getE1ementByTd){ 一 -④) 


document.getE1ementByTd( "1ogoimage" ) . 





回 setAttribute( "width' , width *1) 
document.getE1ementBy1d( "1ogoimage"). 
回 setAttribute('hetght', 1height* ュ ) : 
} 


else if(document.1ayers ){ 
msg = '<1mg Src="images/1ogo.g1f" width="' +iwidth*1+ 
回 "height="! +iheight*1+ ">! 
document[ "subtit1e" ] .document.open( "text/htm1" ) 
document[ "subtit1e"] .document .write(msg) : 


document[ "subtit1e" ] .document.c1ose( ) 


} 

ュ +=dstepj 

setTimeout( "zoomTmage( ) " ,100) 
+} 
7/--> 
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</ script> 

<body on1oad="zoomTmage( ) "bgcolor="#e6e6fa"> 

<h3> 画 像 の 大 き さ を 変え る </h3> 

<hr /> 

<div id="subtit1e" sty1e="position:absolute:top:80px"> ーーーー テ 
<1mg 1d="1ogoimage" src="1mages/1ogo.g1 和 f" /> ーーーーーーー① 

</Div> 

</body> 

</htm1> 


この サン プル で は 、 画像 を 拡大 し た り 、 縮 小 し た り し て いま す 。 ス クリ プ ブ ト の 
基本 的 な 構造 は 、「11-6 文字 の 拡大 ・ 縮 小 ] と 変わ り ま せん 。 サ イズ の 指定 の 
仕方 が 若干 変わ っ て いる 程度 で す 。 

この サン プル で も IE5 以 上 と NN6、NN4 で は それ ぞ れ 処理 が 異な り ま す 。 IE5 
以上 と NN6 で は イメ ー ジ の プロ パテ ィ を 直接 変更 する こと に より 、 画 像 の 拡大 、 
縮小 を 実現 し ます 。 画像 を 扱う た め に 、① の 箇所 の に よう に <img> 要 素 の id 属 
性 で 「logoimage」 と いう 名 前 を 付け て いま す 。 

NN4 で は 直接 イメ ー ジ の プロ バ パティ が 扱え な い の で 、② の 箇所 の よう に <div> 
要素 で 作ら れ た レイ ヤー の 中 に 記述 され て いま す 。 そ の た め 、 レ イヤ ー を 操作 す 
る と 画像 も サイ ズ が 変更 され ます 。 こ の レイ ヤー の 記述 で は 、NN4 で レイ ヤー と 
し て 認識 させ る た め に 、id 属 性 と style 属 性 で 「position:absolute」 が 必要 に な 
り ま す 。 

次 は 画像 の サイ ズ 指 定 の 方 法 で す 。 文 字 列 の 場合 は 単純 に フォ ント サイ ズ を 指 
定 す れ ば よかっ た の で す が 、 画 像 に は 縦 と 横 の 長 さ が あり ます 。 さ ら に 画像 の 縦 
横 比 を 変え た とく あり ませ ん 。 そ こ で 、 こ の サン ブル で は 画像 の 縦 と 横 の 長 さ に 同 
じ 変 数 1 を 掛け て 、 そ の 変数 i を 変化 させ て いく こと に より 画像 の 大 き さ を 変え て 
いま す 。 変数 ij は 、「0.5] か ら 「1.5」 ま で 動く よう に し て いま す 。「0.5」 よ り 小 さ 
く な る と 、 変 数 i を 変化 させ る た め に 足し て いく 変数 dstep を 正 に 、 変 数 i が 
「1.5] よ り 大 きく な る と 変数 dstep を 負 に し ます (③ の 箇所 )。 

画像 の サイ ズ の 変更 は 、IE5 以 上 と NN6 で は setAttribute 必 性 で 指定 し ます 。 
IE5 以 上 と NN6 か どう か を 、document.getElementByld オ ブ ジ ェクト 動作 
する か どう か で 確認 し ます 。 動 作 する 場合 に は 、④ の 箇所 の if 文 が 真 に な る の で 、 
その 次 の ブロ ッ ク が 実行 され ます 。setAttribute 属 性 は 次 の よう な 書式 に な り 
ます 。 
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オブ ジェ クト . setAttribute( 名 前 値 ) 


これ に より 画像 の 幅 と 高 さ を 直接 指定 し て いま す 。 こ の サン プル で 用 いて いる 
画像 は 横 300 ピ クセ ル 、 縦 200 ビ クセ ル の 画像 で す 。 そ の 画像 の サイ ズ を ⑤ の 科 
所 で 変数 iwidth、iheight に 格納 し て いま す 。 そ の た め 、 画 像 の サイ ズ の 指定 は 
以下 の よう に な り ま す 。 


@iwidth*i 
人 @iheight*i 


NN4 の 場合 に は 、 レ イヤ ー 内 の 文字 列 を 変更 する こと に より 画像 の サイ ズ を 変 
更 し ます 。 レ イヤ ー の 内 部 に 代入 する 文字 列 は <img> 要 素 を 用 いて 、 こ の 中 で 
width 属 性 と height 属 性 を 指定 し ます 。IE5 以 上 と NN6 と 同様 に 変数 {を 用 いて 
表現 され た 幅 と 高 さ を width 属 性 、height 属 性 に 代入 し ます 。 こ の よう に し て 
作成 され た 文字 列 を 格納 し た 変数 msg を 、 レ イヤ ー の 内 部 に 対し て 書き 込む 処理 
を 行う と 画像 が 拡大 また は 縮小 され ます 。 さ ら に 、 次 の 処理 の た め に 変数 i に 変 
数 dstep を 足し 合わ せま す 。 

最後 に に の 一 連 の 処理 を 繰り 返し て 、 連続 的 に 画像 の サイ ズ を 変更 する た め に 、 
setTimeout メ ソ ッ ド を 用 いて タイ マー を 設定 し ます 。 こ の サン ブル で は 100 ミ 
リ 秒 ご と に 、zoomlmage 関 数 を 呼び 出す よう に し て いま す 。 


山 I P S 


NN4 で は 画像 の 書き 換え 処理 が 遅い た め 、 こ の サン プル を 実行 する と 画像 が ち 
ら つ いて し まう こと が あり ます 。 そ の た め 、 あ まり タイ マー を 短く する と 見 づら 
く な っ て し まい ます 。 

ロー カル ディ スク 内 で 動作 確認 し た 後に 、 イ ンタ ーネット 上 の Web ペ ー ジ に 
スク リプ ト を 配置 し 、 実際 に 表示 し て みて 、 き ちん と 画像 の 拡大 ・ 縮 小 が スム ー 
ズ に いく か どう か を 確か め て お く と よい で し ょ う 。 


コウ 
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11-9 > 國 ト 陸 量 


フェ ー ド イン する テキ スト 


オブ ジェ クト sty1e.co1or= "rgb( "R” ,。 G 。"B')" 


この スク リプ ト で は 、 文 字 列 を フェ ー ド イン させ て いま す 。 フ ェ ー ド イン は 目 
を 引く の で 、 こ こ ぞ と いう 部 分 に 使う と 非常 に 効果 を 発揮 し ます 。 効 果 的 に 使っ 
て 、 ユ ー ザ ー の 目 を 楽し ませ まし ょ う 。 


委 fadein text - Microsoft Internet Explorer 


_ ア イル 旨 信 ) 表示 7 お 気 に 和 0⑱ ツ - ル GO AM2 専 | 


フェ ー ド イン する テキ スト 








Hello JavaScnptl! 





ここ を クリ ッ ク し て 、 テ 
キス ト の フェ ー ド を 行う ツル 











和 fadein text - Microsoft nternet Explorer 回 回 四 








フェ ー ド イン する テキ スト 





呈 fadein text - Microsoft Imternet Explorer 居 


アイ ル (E) 編集 C 表示 お 気に入り D@ ツー ル ①D へ ルプ ⑱⑪ 








フェ ー ド イン する テキ スト 





fadejn text - Microsoft Internet Explorer 


編集 (E) 表示 び ) お 気 に 入 D ツー ル ①D ヘル プ ⑪ 


フェ ー ド イン する テキ スト 










イル) 








Hello JavaScriptl 
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00 語っ fadeintext.html 


<htm1> 

<tit1e>faden text</t ュ 1e> 
<Script 1anguage="〕avaScript1.2"> 
く !-- 

Var hex=255: 


Var step=8: 


function fadeinText( ){ 
if(hex>o) { 
hex-=stepj 
document.getE1ementByTd( "fText" ) . 
sty1e.co1or="rgb("+hex+"」"+hex+"」"+255+") "ーーーーーー②) 
setTimeout( "fadenText( ) " ,100) : 一 ーーー 一 一 (3) 
} 
else{ 
hex=255: 


} 

// ェ ュ ァ 

</ SCript> 

<body bgco1or="#fff8dc"> 

<h3> フ ェ ー ド イン する テキ スト </h3> 

<hr /> 

<div id="fText"><h3>He11o ]avaScript!</h3></div> 


<button onc1ick="fadeinText( ) "> フェ ー ド イン </button> 
</body> 


</htm1> 


D E TA IL S 


この スク リプ ト で は 、「Hello JavaScript!」 と 書か れ た 文字 列 と 、「 フ ェ ー ド 
イン 」 ボ タン が 配置 され て いま す 。 動作 と し て は [ テ -R> ] ボ タン を クリ ッ ク す 
る と 、 文 字 が いっ た ん 消え 、 フ ェ ー ド イン し て きま す 。 

[ユー ドイ ]」 ボ タン を 押す と 、<button> 要 素 に 指定 され た onclick イ ベン ト 八 
ンド ラ で fadeinText 関 数 が 呼び 出さ れ ま す (① の 箇所 )。 

fadeinText 関 数 で は 、 色 の 指定 に 使う 変数 を 変更 し な が ら 、color プ ロ パ テ 
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+Na っ っ y 較 


rna っ っ v 較 


ィ を 用 いて 色 を 実際 に 変更 し て いく 処理 を 行っ て いま す 。 


マ fadeinText 関 数 の 処理 の 流れ 









0>hex 
変数 hex が 0 以下 か ? 


変数 hex=255 


変数 hex か ら 変 数 step を 引く 


つき 7 


色 の 変更 


100 ミ リ に 
fadeinTex1 び 


ます ず 、fadeinText 関 数 で は 変数 hex の 値 を 調べ て いま す 。 変数 hex が 「0」 以 上 
の 場合 に は 色 を 変化 させ る 処理 を 、「0」 以 下 の 場合 に は 次 に 「 フ ェ ー ド イン 」 ボ タ 
ン が 押さ れ た と き の た め に 、 変 数 hex を 「255」 に 初期 化し ます 。 

色 を 変更 する に は color プ ロ パ ティ を 用 いて いま す 。②⑧ の 箇所 の よう に 、 
color プ ロ パ ティ に 対し て 256 進 の RGB の 値 で 色 を 指定 し て いま す 。RGB の 指定 
は 以下 の よう に な り ま す 。 


rgb( " 赤 の 指定 " , " 緑 の 指定 " , " 青 の 指定 " ) 


色 は 、rgb(255,255,255) が 白 、rgb(0,0,0) が 黒 に な り ま す 。 そ し て 、 
rgb(255,0,0) が 赤 、rgb(0,255,0) が 緑 、rgb(0,0,255) が 青 で す 。 こ こ で は 、 
RGB の B だ けが 「255」 の 値 で 変わ ら ず 、R と G は 、 変 数 hex の 値 が 255 か ら 段 々 と 
引か れ て いく こと に な る の で 、rgb(255,255,255) の 白 か ら 少し ずつ 青 に 変化 し 
て いき ます 。 

色 の 設定 を する と 、③ の 箇所 の よう に setTimeout メ ソ ッ ド を 用 いて 、100 ミ 
リ 秒 後に 再度 fadeinText 関 数 を 呼び 出す 指定 を し て いま す 。 こ れ に より 段々 と 
色 が 変化 し て いき ます 。 

この サン プル で は 、 単 純 な 色 指定 を 行っ て いま す が 、 色 の 指定 を 工夫 する こと 
で 、 さ ま ざ ま な 変化 を 作り 出す こと が で きる は ず で す 。 
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COOKIE 











5 2 画 ド 靖 外 ヾ 四 
訪問 者 の 名 前 を 記憶 する 


document.cookie = クッ キー に 書き 込む 文字 列 


unescape (デコ ー ド する 文字 列 ) 


Cookie (クッ キー) と は 、Web ブ ラウ ザ が クラ イア ント 側 の ロー カル ファ イル 
を 参照 する 唯一 の 手段 で す 。Cookie は テキ スト ファ イル で 、 文 字 列 や 数 値 な ど 
の 情報 を 保存 し て いま す 。 こ れ を 使え ば 、 さ ま ざ ま な 情報 を Web ペ ー ジ 側 で 表 
示す る こと が で きま す 。 こ こ で は 、 訪 問 し た ユー ザー 名 を 表示 し て み ま し ょ う 。 


朋 短い 且 こ り を 合せ 


マヤ 最 初 の 訪問 の と き 







3 sa 





最初 だ け ユ ー ザ ー 名 を 入力 ツル 


衝 Cookie Name - Microsoft Internet Explorer 


: ファ イル F) 編集 表示 お 気に入り ツー ル ①D へ ルプ ⑪ 





aixoo っ 較 


ヤマ 2 回目 以降 に アク セス し た 場合 


当 Cookie Name - Microsoft Imternet Explorer 


: アイル) 編集 表示 ) お 気に入り ⑱ ウー ル ①D へ ルプ ⑪ 


以前 の 情報 が クッ 
キー か ら 読 み 込ま 
れ て 、 コ ユーザ ー 名 
が 表示 され る 
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0 人 cookie 1 .html 


<htm1> 
<tit1e>Cookie Name</ て ュ て 1e> 
<Scr1pt 1anguage="]avascript"> 
く !-- 
function getCookie(key){ ー① 
tmp=document.cookie+" ij": 
tmp1=tmp.1ndexOf(key, 0): 
if(tmp1!=-1){ 
tmp=tmp.substring(tmp1, tmp.1ength) : 
start=tmp .1ndexOf("="。 0)+ 1: 
end=tmp.1ndexOf("j"」 start) 





return(unescape(tmp.substring(start, end) ) ) 
9) 
return(""):』 ーーーーーーーーーーーーー ーー ーーーーーー ーー ーーー 一 (2②) 
} 
function inputName( ){ 
names=prompt( "名 前 を 入力 し て くだ さい 。","Your Name"): 
if(names==nu11 ){ 
inputName( ) : 
+ 
setCookie("Name", names)j 
} 
function setCookie(key,va1) { 一 一 一 -(④ 


tmp=key+"="+escape(va1)+"』 
tmp+="expires=Fr1, 31-Dec-2010 23:59:59 GMT ": 
document.cookie=tmp: 

} 

7/--> 

</ script> 

<body bgco1or="#fff8dc"> 

<h3> 訪 問 者 の 名 前 を 記憶 する </h3> 

<hr /> 

<Script 1anguage="]avascript"> 

く !-- 

names=getCookie( "Name" ): 

if (names=="" ){ 一 ーーー 一 (3) 


nputName( ) : 


NN ノ 
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document.write( "ようこそ! "+names+" さん "):ーーーーーーーーーーーーー⑤) 


7/--> 


< く / scr1pt> 
</body> 
</htm1> 


この サン プル で は 、 は じ め て アク セス され た と き に 名 前 を 入力 し て も らい 、 そ 
の 情報 を Cookie に 保存 する こと に よっ て 、 次 回 の アク セス 時 に その 名 前 を 画面 
に 表示 し て いま す 。 

スク リプ ブ ト が 開始 され る と 、 ま ず ① の 部 分 の getCookie 関 数 が 実行 され ます 。 


names = getCookie("Name"): 


この 呼び 出し の と き に 、 パ ラメ ー タ と し て 「Name」 を 渡し ます 。 こ の 関数 に よ 
っ て 返さ れる 値 が 、 変 数 [Tnames」 に 代入 され ます 。 後 で 詳し く 説明 し ます が 、 
getCookie 関 数 で は 、 渡 され た パラ メー タ を 基 に 、Cookie フ ァイル に 保存 され 
て いる 情報 か ら 必要 な 部 分 を 返し ます 。 こ こ で は 、 保 存 さ れ て いる ユー ザー 名 が 
返さ れ 、 変数 names に 代入 され ます 。 は じ め て アク セス し た 場合 に は 空 文字 ("") 
が 返さ れる よう に 設定 し て あり ます (② の 箇所 )。 

③ の 部 分 の if 文 で は 、 変 数 names の 値 が 空 文 字 (" ") だ っ た 場合 、 つ まり は じ 
め て アク セス され た 場合 だ け 処 理 を 行い ます 。 は じ め て の アク セス だ っ た 場合 に 
は 、④ の 個所 の inputName 関 数 を 呼び 出し て いま す 。inputName 関 数 で は 、 
プロ ンプ ト を 表示 し て 、 名 前 を 入力 し て も らい ます 。 

入力 され た 名 前 は 変数 names に 代入 され ます 。names が 空 だ っ た 場合 は 、 も 
う 一 度 inputName 関 数 を 呼び 出し ます 。names に 値 が 代入 され た ら 、 次 に 
setCookie 関 数 を 呼び 出し ます 。setCookie 関 数 で は 、 変 数 names に 代入 され 
て いる 値 、 つ まり 入力 され た 名 前 を Cookie フ ァイル に 登録 し て いま す 。 

最後 に 、 変 数 names に 代入 され て いる 値 を 基 に 、 ユ ー ザ ー へ の メッ セー ジ を 
画面 に 表示 させ て いま す 。⑤ の 部 分 が 、 次 の よう に な っ て いま す 。 
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SECTION 12-1 多 訪問 者 の 名 前 を 記憶 する 


ここ か ら は 、 そ れ ぞ れ の 関数 に つい て 詳し く 説 明 し ます 。 ま ず は 、Cookie フ 
ァイル か ら 必 要 な 情報 を 抜き 出す 、getCookie 関 数 に つい て 説明 し ます 。 
getCookie 関 数 で は 、 は じ め に Cookie フ ァイル の 読み 込み を 行っ て いま す 。 


tmp = dooument .oookie + "の 』 


読み 込ま れ た Cookie フ ァイル の 内 容 は 、 変 数 「tmp」 に 代入 され ます 。 次 に 
indexOf メ ソ ッ ド で 、 パ ラメ ー タ と し て 渡さ れ た 文字 列 が Cookie フ ァイル に あ 
る か どう か を 検索 し 、 あ っ た 場合 は その 先頭 位置 を 変数 tmp1 に 代入 し て いま す 。 
な か っ た 場合 は 「-1」 が 代入 され ます 。 


tmp1 = tmp.indexOEF(key, 0): 


key に は 、 パ ラメ ー タ と し て 渡さ れ た 文字 列 が 代入 され て いま す の で 、 そ の 文 
字 列 を 、 変 数 tmp に 代入 され て いる 文字 列 の 0 番目 の 位置 か ら 検索 し て いま す 。 

次 の if 文 で は 、 パ ラメ ー タ と し て 渡さ れ た 文字 列 が あっ た か どう か に よっ て 処 
理 を 分 岐 さ せ て いま す 。 は じ め て アク セス され た と き に は Cookie フ ァイル が あ 
り ま せん の で 、 検 索 の 結果 と し て 変数 tmp1 に は 「-1」 が 代入 され ます 。 そ の 場合 、 
if 文 の 中 の 処理 は 行わ れず 、 次 の 部 分 が 実行 され ます (② の 箇所 )。 


return(""): 


これ に より 、 変 数 names に 空 文字 (" ") が 代入 され ます 。 検索 の 結果 、 パ ラメ 
ー タ の 文字 列 が あっ た 場合 に は 、 そ の パラ メー タ を 基 に 、Cookie フ ァイル に 保 
存 さ れ て いる 名 前 を 取得 し ます 。 

Cookie 情 報 中 に 検索 文字 列 が あっ た 場合 に は 、⑥ の 部 分 の 処理 が 行わ れ ま す 。 


tmp = tmp.gubgtring(Etmp1, tmp.1ength) 
gtarE = tmp.1indexOE("="。 0) + 1』 
end = tmp.1ndexxOE("』", g モ ar エモ ) 


return (unegCape (tmp . Subg 上 ェ 1inq (BE 上 art, end) ) ) : 
まず substring メ ソ ッ ド を 用 いて キー 以降 の 文字 列 を 取り 出し 、 変 数 tmp に 格 


納 し ます 。 次 に 、「 キ ー= 値 :] と な っ て いる 「=」 の 位置 を 取り 出し 、 そ の 後ろ を 変 
数 start に 格納 し ます 。 ま た 、「:」 の 位置 を 変数 end に 格納 し ます 。 
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start end 


この 変数 start と 変数 end を 基 に 切り 出し 、unescape メ ソ ッ ド で 文字 列 の デ 
コー ド を 行っ て 、 そ の 結果 を getCookie 関 数 の 呼び 出し 元 に 返し ます 。 文字 列 
の デコ ー ド は 、Cookie に 格納 され る 際 に 自動 的 に エン コー ド さ れ て し まう た め 
で す 。 な お デコ ー ド に 使う unescape 関 数 は 以下 の よう な 書式 に な り ま す 。 


unescape( デコ ー ド する 文字 列 ) 


Cookie 情 報 に 以前 格納 し た デー タ が ある 場合 に は 、qgetCookie 関 数 を 何 度 か 
用 いる こと に より 複数 の クッ キー 情報 を 取り 出し ます 。 

次 に 、getCookie 関 数 に よっ て 返さ れ た 値 が 空 文字 (" ") だ っ た 場合 、 つ まり 
は じ め て の アク セス だ っ た 場合 に 呼び 出さ れる 、④ の 箇所 の inputName 関 数 に 
つい て 説明 し ます 。 こ こ で は 、 プ ロン プ ト を 表示 し 、 名 前 を 入力 し て も らい ま 
す 。 ss | ボタ ン が クリ ッ ク さ れ た 場合 に は 、 再 び inputName 関 数 を 呼 
び 出 し て 、 入 力 さ れる まで プロ ンプ ト の 表示 を 繰り 返し ます 。 入力 され た 値 は 、 
変数 names に 代入 され ます 。 そ の 後 で 、「Name」 と いう 文字 列 と 変数 names を 
パラ メー タ と し て 、setCookie 関 数 を 呼び 出し て いま す 。 

最後 に 、⑦ の 部 分 の setCookie 関 数 に つい て 説明 し ます 。 こ の 部 分 で は 、 
Cookie フ ァイル へ の 書き 込み を 行っ て いま す 。 パ ラメ ー タ と し て 渡さ れ た 値 に 
よっ て 、 変 数 「key」 に は Name が 、 変 数 [vall に は 「 設 定 し た 名 前 」 が 代入 され ま 
す 。 処理 は 、 次 の 3 行 で 行わ れ て いま す 。 


1 行 目 で 、 変 数 tmp に は 、「Name= 設 定 し た 名 前 」 が 代入 され ます 。2 行 目 で 
は 、 そ の 文字 列 に 、Cookie の 有効 期限 を 表す 文字 列 が 連結 され ます 。 期限 を 指 
定 し な か っ た 場合 、Web ブ ラウ ザ を 終了 する と クッ キー が 消去 され て し まい ま 
す の で 注意 し て くだ さい 。 最 後に document オ ブ ジ ェクト の cookie プ ロ パ ティ 
を 使っ て 、 変 数 tmp の 値 を クッ キー に 書き 込ん で いま す 。 
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ユー ザー が 何 回 アク セス し た か を 記憶 する 
document.cookie = クッ キー に 書き 込む 文字 列 
unescape (デコ ー ド する 文字 列 ) 














Cookie に は 、 ユ ー ザ ー が その Web ペ ー ジ を 何 回 訪れ て いる か と いっ た 情報 も 
保存 され て いま す 。「 あ な た は ……* 回 目 の 訪問 で す ]」 と いっ た 表示 を し て み ま し ょ 
う 。 


2 志 / 坦 天 し 





和 Cookie Times - Netscape 6 回 回 四 


= アイル (F) 編集 E) 表示 ( び ) 検索 ⑤) ジャ ンプ ⑬) ブッ クマ ー ク (⑧) が (D ヘル 


訪問 回 数 を 記憶 する 

















これ まで の 訪問 回 数 :1 





国 Cookie Times - Netscape 6 癌 回 区 


< アイ ル (E) 編集 CE) 表示 (V 検索 ⑤) サ ャ ンプ (③) ブッ クマ ー が (B) 2 ス 22①D ヘル 


訪問 回 数 を 記憶 する 







これ まで の 訪問 回 数 :2 








N Cookie Times - Netscape 6 





ょ アイ ル F) 編集 CE) 表示 () 検索 ⑤) ジャ ンプ Q⑯) ブッ カク マーク) タス 2①⑪ ヘル ] 


訪問 回 数 を 記憶 する 











これ まで の 訪問 回 数 :3 


開く た びに 、 訪 問 
回 数 が 増え て いく 
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に cookie2.html 


<htm1> 
<t ュ it1e>Cook1e Times</ て ュ ト 1e> 
<Script 1anguage="]avascript"> 
く !-- 
Var timesi 
Tunction getCookie(key ){ 
tmp=document.cookie+"j": 
tmp1=tmp.1ndexOf(key, 0)j 
1f(tmp1!=-1){ 
tmp=tmp.substring(tmp1,tmp.1ength) 
start=tmp.1ndexOf( "="」0)+15 
end=tmp .1ndex0f("j" ,start ) 
return(unescape(tmp.substring(start, end) ) ) 


} 


return("")j』 


function setCookie(key,va1) { 


+escape(va1)+"j": 


tmp=key+ 
tmp+="expires=F エ 1。 31-Dec-2010 23:59:59』 『j 
document.cookie=tmD: 

} 

7/ - -> 

</ scr1pt> 

<body bgco1or="#fff8dc"> 

<hs> 訪 問 回 数 を 記憶 する </h3> 

<hr /> 

<Script 1anguage="]avascript"> 

く !-- 

times=getCookie( "Times") 一 ーーーーーーーーーーーーーーーーーーーー( 

if (times=="") { 一 一 一 ーーーーーーーーーー(②) 

times=1: 

+ 

document.write(" こ れ ま で の 訪問 回 数 : "+t1imes) 

times++ ぅ ーーーーーーーー ーー 一 ーーーーーーーーーーーー〈③) 

setCookie( "Times",t1mes): 

7/--> 


370 


</ Script> 
</body> 
</ htm1> 


EE 具合 


getCookie 関 数 と setCookie 関 数 の 2 つ は 、 先 ほど の 「12-1 訪問 者 の 名 前 を 
記憶 する 」 の 名 前 を 表示 する サン プル と まっ た く 同 じ で す 。 こ こ で は 、 先 ほど の 
サン プル と 違う 部 分 だ け を 説明 し ます 。 

① の 箇所 で getCookie 関 数 を 呼び 出し て いま す 。 与 える バラ メー タ は Cookie 
の キー と な る 文字 列 「Times」 で す 。 こ の パラ メー タ に よっ て Cookie 内 の 他 の 情 
報 と 区 別 さ れ 、 必 要 な 情報 だ けが 取得 で きま す 。 こ こ で は 、 今 まで の アク セス 回 
数 が 返さ れ 、 変 数 [times」 に 代入 され ます 。 

は じ め て の アク セス だ っ た 場合 、getCookie 関 数 に よっ て 空 文字 (" ") が 返さ 
れ ま す 。 そ の 場合 に は 、⑧ の 箇所 の if 文 の 処理 が 実行 され 、 変 数 times に は 「1」 
が 代入 され ます 。 

次 に 「 こ れ ま で の 訪問 回 数 :] と いう 文字 列 に 、times に 、 代 入 さ れ て いる 値 を 結 
合 し た も の を 画面 に 表示 させ て いま す 。 

その 後 、③ の 部 分 で 変数 times の 値 を 「1」 増 や し て か ら 、setCookie 関 数 を 呼 
び 出 し ます 。 バ パラ メー タ は 文字 列 「Times」 と 変数 times の 値 で す 。Cookie フ ァ 
イル に は 「1」 増 えた 後 の 変数 times の 値 が 書き 込ま れる の で 、 次 に アク セス し た 
と き に は 1 つ 値 が 増え て いる の で す 。 

この よう に 、 ク ッ キ ー を 使っ て 、 ユ ー ザ ー が 訪れ て いる 回 数 を Web ペ ー ジ に 
表示 する こと が で きま す 。 回 数 に 応じ て 、「 は じ め ま し て 」 や 「 い つも あり が と う 」 
な ど 、 メ ッ セ ー ジ を 変え て 表示 し て みる の も 面白 いで し ょ う 。 
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asianoo っ 較 


の 
に 
に 
し 1 
m 


ee 才 疫 い 章 ら 画 ド 細 


名 前 と 訪問 回 数 を 記憶 する 


クッ キー か ら 読 み 出し た 文字 列 を 代入 する 変数 ==document.cookie 


unescape (デコ ー ド する 文字 列 ) 





この サン プル は 、 こ れ ま で に 説明 し た 、Cookie に 名 前 を 保存 する スク リプ ト 
と 、Cookie に アク セス 回 数 を 保存 する スク リプ ト を 組み 合わ せ た も の で す 。 複 
数 の 情報 を 保存 させ て お きた い 場 合 に 参考 に し て くだ さい 。 


マヤ 最初 の 訪問 の と き 
Explorer ユー ザー ブロ ン ブ ト 


スプ ト ブロ ンプ ト 
名 前 を 入力 し て くだ さい 。 


宮坂 狗 





最初 だ け 、 ユ ー ザ ー 名 を 入力 する シル 


当 Cookies - Microsoft Internet Explorer 
ファ イル (E) 編集 EC) 表示 () お 気に入り (⑧ ツール ① ハル プ (H 


名 前 と 訪問 回 数 を 記憶 する 


これ まで の 訪問 回 数 :1 
よう こそ ! 宮 ん 





マ 2 回 目 以降 の 訪問 の と き 


当 Cookies - Microsoft Internet Explorer 


ブイ ル (F) 編集 (E) 表示 W) お 気 に 入 D⑱ ツール ① 人 ヘルプ ⑪⑬ 


名 前 と 訪問 回 数 を 記憶 する 


これ まで の 訪問 回 数 :2 
| よう こそ ! 宮坂 雅 泊 さ ん 
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に 全 | 半 選 湖畔 cookie3.html 


<htm1> 

<tit1e>Cookies</t ュ 1e> 

<Scr1pt 1anguage="]avascript"> 
く ! -- 

function getCookie(key ) 


tmp=document.cookie+"』": 
tmp1=tmp・3ndexOf(key,0)j ーー 一 ーー 一.②) 
if(tmp1 !=-1) 人 {人 
tmp=tmp.substring(tmp1,tmp.1ength) 
start=tmp.1ndexOf("="」0) + 1 
end = tmp.indexOf( "j" ,start) 
return(unescape(tmp.substring( start, end) ) ) 
return(""): 


} 


function setCookie(key,va1 ){ 


tmp=key+"="+escape(va1)+"』 
tmp+="expires=Fr1,1-Jan-2010 23:59:59』 
document.cookie=tmp: 

} 

7/--> 

</ scr1pt> 


<body bgco1or="#fFff8dc"> 
<h3> 名 前 と 訪問 回 数 を 記憶 する </h3> 
<hr /> 
<Script 1anguage="]avascript"> 
times=getCookie( "Times"): 
if (times=="") て 
times=1: 
} 
names=getCookie( "Name" ) 
if (names=="") { 
1nputName( ) 
上 
document.write(" こ れ ま で の 訪問 回 数 : "+times+"<BR>") : 一 一 ーーーーー① 
document.write(" よ うこ そ ! "+names+" さ ん "): 
times++』 


setCookie( "Times" times) 
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setCookie( "Name",names) 
function inputName( ){ 
names=prompt( "名 前 を 入力 し て くだ さい 。","Your Name"): 
if(names==nu11 ){ 
inputName( ) 


+ 

</ Script> 
</body> 
</htm1> 


二 E - す 介 大 記 E き 


この サン プル を 読み 込む と 、 今 まで に アク セス し た 回 数 と 、 初 回 アク セス 時 に 
入力 し た 名 前 が 、 ペ ー ジ 上 に 表示 され ます 。 

① の 箇所 で ペー ジ 上 に 書き 込む 際 に 改行 する た め の 、<br /> タ グ を 加え て いる 
こと 以外 は 、「12-1 訪問 者 の 名 前 を 記憶 する 」 と 「12-2 ユー ザー が 何 回 アク セ 
ス し た か を 記憶 する ]」 の 2 つの サン プル を コピ ー し て 貼り 付け た だ け で 、 ど こ に も 
手 が 加 えら れ て いま せん 。 こ れ は 、Cookie を 読み 込ん だ り 書 き 込 ん だ りす る た 
め に 作成 し た getCookie 関 数 と setCookie 関 数 が 、 パ ラメ ー タ に よっ て 必要 な 
部 分 だ け を 参照 で きる よう に 作成 され て いる か ら で す 。 

getCookie 関 数 で は 、⑧ の 部 分 で 、 パ ラメ ー タ と し て 与え られ た 「Times」 
また は 「Name」 の 先頭 位置 を 調べ 、 そ の 位置 か ら 処理 を 行っ て いま す 。 引数 と し 
て 与え られ た 文字 列 は 、 変 数 key に 格納 され て いま す 。 


これ に よっ て 、Name の 値 を 参照 し た い 場合 に は 、Times に 保存 され て いる 部 
分 を 参照 する こと な く 、Name 以 下 だ けが 参照 され 、 正 し い 結 果 を 返す こと が で 
きま す 。 

この よう に 複数 の 値 を Cookie に 保存 し て 用 いる こと が で きま す 。 
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12-4 四 押 | 
Cookie を 削除 する 


Date オ ブ ジ ェクト 名 .setYear (Date オ ブ ジ ェクト . getYear( ) - 1) 






喘い 細 


この スク リプ ト は Cookie で 設定 し た も の を 削除 する も の で す 。 何 ら か の 理由 
で 、 Web ブ ラウ ザ に 送っ た Cookie を 削除 する 必要 が ある か も し れ ま せん 。 また 、 
デー タ 形 式 の 修正 が 入っ た 場合 な ど に は 、Cookie 消 し て か ら 、 再 度 他 の 値 を 書 
き 込 むと いっ た 処理 も 考え られ ます 。 こ こ で は Cookie を 削除 する スク リプ ト を 
紹介 し ます 。 


Lc( 具 2 


マヤ 削除 する Cookie が あっ た 場合 
委 Delete Cookie - Microsoft Internet Explorer 


ファ イル 機 染 ) 才 QO お % に AO ツー ル ①D ヘル 2G⑪ 





Cookie の 削除 





ここ を クリ ッ ク し て 、 
Cookie を 削除 する 












当 Delete Cookie - Microsoft Imternet Explorer 


アイ ル ) 編集 (E) 表示 お気 に 入 D⑱ ツー ル ① 人 ヘルプ ⑪ 








Cookie の 削除 


Microsoft mternet Explorer | 区 
い Cookie を 1 個 削除 し まし た 。 
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削除 する クッ キー が な か っ た 場合 





当 Delete Cookie - Microsoft Internet Explorer 


に _Delete Cook 


Microsoft mternet Explorer | 家 


し 欄 : deletecookie.html 


<htm1> 
<tit1e>De1ete Cookie</tit1e> 


まこ 1anguage="]avascript"> 


function delete1Cookie( ){ 


if(document.cookie != "" ){ 2 


} 


tmpCookie = document.cookie.sp1it(": 


expireDate = new Date(): 
expireDate.setYear(expireDate.getYear( ) -1): 


for(i=0: <tmpCookie.1ength: i++){ 一 ーーーーーーーー④ 
cName = tmpCookie[i] .sp1it("=")[9]: 
document。cookie = cName + "=: ーーーーーーーーーーーーー③ 
expireDate=" +exp1reDate .toCMTStrng( ) 


+ 
a1ert( "Cookie を "+tmpCookie .1ength+" 個 削除 し まし た 。"): 


e1set 


} 


a1ert( "削除 する Cookie は あり ませ ん 。『"): 


7/--> 
< く / Script> 
<body bgco1or="#ffF8dc"> 
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<h3>Cookie の 削除 </h3> 
<hr /> 
<form> 
<1nput type="button" value="Delete Cookie" 
回 onc1ick="delete1Cookie()" /> 
</form> 
</body> 
</htm1> 


人 っ っ 記 。 貞 | る 


この スク リプ ト で は Cookie を 削除 し ます 。Cookie の 削除 は 非常 に 簡単 で す 。 
Cookie の 有効 期限 を 現在 の 日 付 た より も 過去 に すれ ば 自動 的 に Cookie は 削除 さ 
れ ま す 。 

まず 最初 に 、①) の 箇所 で 行わ れ て いる よう に Cookie が 設定 され て いる か どう 
か を 調べ ます 。 こ こ で も し Cookie が 空 ("") だ っ た な ら ば 、 こ の if 文 は 真 に な ら 
な い の で 処理 は 行わ れ ま せん 。Cookie が セッ ト さ れ て いる と し た ら 、split メ ソ 
ッ ド を 用 いて 「:」 で 切り 離し た 値 を 変数 [tmpCookie」 に 代入 し ます 。 

次 に Cookie の 有効 期限 を 割り 当て る た め の Date オ ブ ジ ェクト 「expireDate」 
を 用 意 し ます 。 こ こ で は Date 関 数 を 使っ て 現在 の 日 付 を 取得 し た 後 、expire 
Date の 年 か ら 「1」 を 引い た 値 を 、 再 度 expireDate に セッ ト し て いま す (⑧ の 個所 )。 

ここ まで の 処理 に より 、expireDate は 現在 の 日 付 よ り 1 年 前 の 日 付 が セッ ト 
され て いま す 。 

最後 に 、3③ の 箇所 の よう に "document.cookie "に 再度 Cookie を expire 
Date の 日 付 を 使っ て 設定 し 直す こと に より 、Cookie を 削除 し ます 。 

な お 、 こ の サン ブル で は 再度 日 付 に 変換 する 際 に 、toGMTString メ ソ ッ ド を 
用 いて いま す 。 こ れ は グリ ニッ ジ 標 準 時 を 文字 列 で 返す メソ ッ ド で す 。 同 様 の 世 
界 協定 時 を 返す toUTCString メ ソ ッ ド を 用 いて も か まい ませ ん 。 


@ グ リ ニ ッ ジ 標 準 時 を 返 サ すけ メ ソ ッ ド 
Date オ ブ ジ ェクト .toGMTString( ) 
人 @ 世 界 協定 時 を 返す メソ ッ ド 


Date オ ブ ジ ェクト .toUTCString( ) 


ヤオ 。 





aivoo っ 識 


また 、④ の 記述 に より この サー バー が 送り 込ん だ すべ て の Cookie を 削除 する 
こと が で きま す 。 こ の 処理 は for 文 に より Cookie の 数 だ け 処理 を 繰り 返す も の で 
す 。 

削除 する Cookie が な い 場 合 は 、「 削 除 す る Cookie は あり ませ ん 」 と いう アラ 
ー ト が 表示 され ます 。 

な お 、 こ の Cookie を 削除 する サン プル は 、 削 除 し た い Cookie を 設定 し た 
Web ペ ー ジ が 配置 し て ある フォ ル ダ と 同じ フォ ル ダ に な けれ ば な り ま せん 。 


COLUMN 
P3P 


イン ター ネッ ト 上 で さま ざま な サー ビス が 行わ れる よう に な っ た こと で 、 
話題 に な っ て いる の が 、 個 人 情報 の 問題 、 そ う プ ライ バシ ー に 関わ る 部 分 で 
す 。 し か し 、 さ ま ざ ま な 経済 活動 が イン ター ネッ ト 上 で 行わ れる と 、 当 然 個 
人 情報 が 必要 な 場面 に 遭遇 し ます 。 こ の よう な 状況 の 中 で W3C は P3P 
(The Platform for Privacy Preferences) と いう 規格 を 検討 し て いま す 
(2001 年 1 1 月 現在 )。 

この 検討 中 の 規格 を IE6 が 部 分 的 に サポ ー ト し て いま す 。 そ れ は クッ キー 
の 扱い 方 の 部 分 で す 。 IES で は 、 デ ィ フ ォ ル ト 状 態 で サー ドド メイ ン の クッ 
キー を ブロ ッ ク す る よう に な り ま し た 。 要する に Web ペ ー ジ 内 に 埋め 込ま 
れ た 外部 サイ ト の iframe や image の 要素 か ら の クッ キー は 受け 付け な いと 
いら と で ず の 。 

さら に 、PS3P に 対応 し て いな い 場 合 に は 、 ス テー タス バー に 警告 が 出る 
よう に し て いま す 。 こ の よう な 実装 は 、Cookie を 使っ て イン ター ネッ ト 上 
で の 個人 の トラ ッ キ ング な ど が 行わ れ て いる と 考え て いる た めで す 。 こ れ に 
よっ て 困る の は 広告 な ど を 提供 し て いる 広告 配信 会 社 に な り ま す 。 

で は どの よう に すれ ば P3P に 対応 し た と いえ る の で し ょ うか が か? まず は 
当然 で す が 、 個 人 情報 取り 扱い 規定 (Privacy Policy Statement) を 作成 し 
ます 。 そ の 上 で 、HTTP ヘ ッ ダ ー と Web サ イト 上 の 個人 情報 取り 扱い 規定 
に 記載 され て いる 定義 を 設定 し ます 。 

な お 、 サ イト を どの よう に P3P 対 応 に する か に つい て の 詳細 な 説明 は 、 
次 の URL を 参照 し こく だ さい 。 


URL 際 http://www.w3 .org/P3P/detai1g .htm1 
URL http://www.w3 .org/TR/p3pdep1oyment 
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、】 


TO 











IOTHERS 








外部 ファ イル か ら リ スト を 作成 する 





この サン ブル は 外部 JavaScript フ ァイル を 使っ て 、 特 定 の Web ブ ラウ ザ 用 に 
URL の リス ト を 作る と いう も の で す 。HTML フ ァイル の ほか に 「*.js] ファ イ 


ル を 用 意 し て 、 そ れ を 取り 込み ます 。 


信二 に 人 い を - 丘 『 


当 External List by JavaScript - Microsoft Internet Explorer 


イル) 編集 表示 ) お 気 に 和 D⑱ ツー ル ① ヘル プ ⑪ 








外部 ファ イル か ら リ スト を 作成 する 


これ は IE 用 の リン ク で す 


http//www microsoft com/ 
http//wwywsoftbank co_jp/ 


http//wwwmici /pan 








http//wwwyahoo.cojjp/ 
Http://wwwv neko-no-te net/books/ 
http//wwwvmsn cojp/ 
http//wwwwzdnet co.jp/ 
http//vwwww geocities Com/ 





NN External List by JayaScript - Netscape 6 


|。| アイ ル (F) 編集 CE) 表示 検索 G) ジャ ンプ (G ブックマーク (B) 22 が D ヘル プ ⑬ 





外部 ファ イル か ら リ スト を 作成 する 


|| これ は NN 用 の リン ク で す 


| NN Http://home.netscape.com/ 

BOTH http://www.softbank.co.jp/ 
http://www.yahoo.co.jp/ 
http://www.neko-no-te.net/books/ 
http://www.net scape.corm/ ja/ 
http://www.zdnet.co.jp/ 
http://www.geocities.com/ 


Web ブ ラウ ザ に よっ 
て 、 表 示さ れる リン 
ク が 変更 され る 


380 








お の 革 ら を こ 世 exdblist.html 


<htm1> 
<tit1e>Externa] List by ]avaScript</ て ュ て 1e> 
<sty1e type="text/css"> 
td.categoryce11 { background: #dddddd: } 
a:1ink { col1or: #000080: 
text-decoration: none } 
ai:visited { color: #800000 
text-decoration: none } 
aihover { co1or: #FfOO00: 
text-decoration: under1ine}+ 
</ sty1e> 
<script 1anguage="]avascript" src="ur] .]s"></script> ーー 一 (]) 
<scrtpt 1anguage="]avascript"> 
く ! -- 
Var co1s = 2: ④ 





Var rows = 10: 
var amount = col]s * rowsi 


Var uaj 


Tunction makeList( ){ 
Var uagent = navigator.userAgent: 
if( uagent.indexOf('MSTE') >= Oo ){ 


FT 上 - 舞 0 

} 

else if( uagent.indexOf( 'Mozi11a/') >= o ){ 
ua = "NN'j 

} 

else{ 
ua = "Other": 

} 


document.write("<h4> こ れ は " + ua + "用 の リン ク で す </h4>") 
document.write( "<tab1e border='O'>"): 
for( 1 = 0 ji < amount : i+=co1s ){ 一 ーーーーーーーーーー(⑤) 
f( exDB[i] == ua || exDB[i] == "BOTH" ){ 一 ーーーーーーー③ 
document.write( "<tr><td c1ass='categoryce11 


回 width='60'>" + exDB[1] + "</td>"): 
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回 document .write( "<td><a href=" + exDB[i+1] +">" 
回 + exDB[i+1] + "</a></td></tr>" ) 
} 
} 
document.write( "</table>" ) 
} 
7/ - -> 
</ scr1pt> 


<body bgco1or= "# 和 ff8dc"> 
<h3> 外 部 ファ イル か ら リ スト を 作成 する </h3> 
<hr /> 
<script 1anguage="]avascript"> 
く !-- 
makeList( ) 
7/--> 
</script> 
</body> 
</ htm1> 


UrljS 
var exDB = new Array( ) 
exDB[0] = "IE"j 
exDB[ 1] = "http://www.microsoft.com/『: 
exDB[2] = "NN": 
exDB[3] = "http://home.netscape.com/『: 
exDB[4] = "BOTH": 
exDB[5] = "http://www.softbank.co.Jp/"j 
exDB[6] = "1E": 
exDB[7] = "http://www.microsoft .com/]apan"j 
exDB[8] = "BOTH": 
exDB[9] = "http://www.yahoo.co.]jp/": 


exDB[10] = "BOTH": 

exDB[11] = "http://www.neko-no-te.net/books/『: 
exDB[12] = "NN'j 

exDB[13] = "http://www.netscape.com/]a/"j 
exDB[14] = "IE" 

exDB[15] = "http://www.msn.co.]P/" 

exDB[16] = 


"BOTH"j トノ 
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exDB[17] = "http://www.zdnet.co.]p/" 


exDB[18] = "BOTH": 
exDB[19] = "http://www.geocities.com/": 


D E T A Il 


この サン ブル は Web ブ ラウ ザ の 判定 を 行い 、IE、NN ご と に 異な る URL の リス 
ト を 出力 する スク リプ ト で す 。Web ブ ラウ ザ ご と に 出力 する も の を 変え る と い 
う の は よく ある 話 で す 。 こ の と き 、 通 常 な ら ば 1 つの HTML フ ァイル 中 に 両方 の 
コー ド を 書い て 、 そ れ を 判定 させ て 出力 する こと が 多い の で す が 、 結 構 メ ン テ ナ 
ンス が 面倒 だ っ た り し ます 。 そ こ で 、 リ スト に 相当 する 部 分 だ け 外部 に 切り 出し 
て 、 メ ン テ ナ ンス 性 を よく し ます 。 ま た 、 こ の よう に し て お く と 、 人 外部 ファ イル 
の 部 分 を 切り 替え る こと で 、 す ぐに 更新 作業 が で きる よう に な り ま す 。 

で は 、 最 初 に 外部 JavaScript フ ァイル 「url.js」 の 説明 を し ます 。 外 部 
JavaScript フ ァイル は 当然 な が ら JavaScript の コー ド で な く て は な り ま せん の 
で 、 デ ー タ を 扱う の に 便利 な CSV 形 式 ( カ ンマ 区 切り ) や タブ 区 切り は 扱う こと が 
で きま せん 。 し か し 、 変 数 を 多数 用 意 する の も 面倒 な の で 、 配 列 要素 に デー タ を 
代入 する と いう 方 法 を と り ま す 。 

その た め 、 ま ず 配 列 要素 を 宣言 し ます 。 


var exDB = new Array( ) 
その 後 、 こ の 配列 に デー タ を 入れ て いき ます 。 
exDB[ 添 え 字 ] = デー タ : 


サン ブル で は どの Web ブ ラウ ザ 用 か と いう 情報 と 、URL の 情報 の 2 つ を 1 組 の 
デー タ と し て 扱う よう に し て いま す 。 そ の た め 、 横 方 向 ^ の の テー ブル と 考え る こ 
と も で きま す 。 外部 JavaScript フ ァイル は NN3 以 降 、IE4 以 降 で し か 動作 し ませ 
ん 。 ま た ファ イル 名 は 拡張 子 が 「.js] で な く て は な り ま せん 。 こ れ は 必須 な の で 、 
Macintosh な どの 制作 環境 の 方 は 忘れ な いよ うに し まし ょ う 。 

次 に 本 体 の HTML フ ァイル に つい て 見 て いき まし ょ う 。 最初 に <script> タ グ 
の src 属 性 を 用 いて 、① の よう に 外部 ファ イル に 対し て リン ク を 行っ て いま す 。 
実際 に この 部 分 に ファ イル の スク リプ ト が 読み 込ま れる と 考え る と 理解 し や すい 
と 思い ます 。 
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saan+o 較 





次 に 外部 ファ イル の 内 容 を テー ブル と し て 見 た と き の 縦 (rows) と 横 (cols) の 
数 を 設定 し ます 。 な お 外部 JavaScript フ ァイル を どの よう な テー ブル と し て 見 る 
か は 以下 の 図 の と お り で す 。 ま た 要素 の 全体 の 数 を cols と rows の 積 で 求め ます 。 


ai 





TOWS 


さら に 、 ユ ー ザ ー の Web ブ ラウ ザ を 判定 し て 、Web ブ ラウ ザ ご と リス ト を 生 
成す る た め の makeList 関 数 を 用 意 し ます 。 こ の 関数 は 、② で Web ブ ラウ ザ の 判 
定 を 行い 、 そ の 結果 を 変数 「ua」 に 格納 し ます 。 次 に ua と 外部 JavaScript フ ァ イ 
ル 内 の 配列 で 添え 字 が 2 の 倍数 の 要素 内 に 入っ て いる 文字 を 、3③ の よう に 比較 し 
ます 。 な ぜ 2 の 倍数 な の か と いう と 、④ で 変数 cols に 2 を 代入 し て いる か ら で す 。 
この と き 配 列 要素 内 の 文字 列 と ua が 同じ 場合 、 ま た は 配列 要素 内 の 文字 列 が 
「BOTH」 だ っ た 場合 に は 表示 する よう に し て いま す 。 処理 の 流れ を 図示 する と 次 
の よう に な り ま す 。 










ME na 


同じ また は exDBH の 文字 列 が "BOTH" 


exDB[2 の 倍数 十 1] を 出力 


配列 の 要素 が ある 問 は 
ルー プ す る 
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な お 、 ル ー プ の 処理 で す が 、 配 列 の 要素 の 数 が 変数 [amount」 に 格納 され て い 
る の で 、 こ れ を 終了 条件 と し ます 。 ま た 配列 は カラ ム の 数 ご と に Web ブ ラウ ザ 
に 関し て の 情報 が 入っ て いる の で 、 継 続 条 件 は 変数 cols を 足し ます 。 す な わ ち カ 
ラム 数 ご と に 参照 し こい く の で for 文 の 記述 は $⑤ の よう に な り ま す 。 

この よう に 、 人 外部 JavaScript フ ァイル を 使う と 比較 的 すっ きり と し た スク リプ 
ト で 上 記 の よう な 機能 を 実装 する こと が で きま す 。 デ ー タ の 部 分 と 処理 の 部 分 を 
分 離し て 記述 する と いう の は プロ グラ ミン グ 上 有効 で ちる と いえ ます 。 ま た 外部 
JavaScript フ ァイル は 複数 用 いる こと が で きる の で 、 処 理 の 部 分 を 分 割 す る と い 
っ た こと も 可能 と な り ま す 。 こ うし て お く と メン テ ナ ン ス 性 が よい だ け で な く 、 
スク リプ ト を 使い 回 すこ と も で きま す 。 

た だ し 、 こ の 場合 に は 本 体 の HTML フ ァイル の 他 に 外部 JavaScript フ ァイル 
を ダウ ン ロ ー ド し な く て は な り ま せん 。 そ の た め 、Web サ ー バ ー に か か る 負荷 
が 大 きく な っ た り し ます 。 さ ら に 、 色 部 JavaScript フ ァイル で 扱う デー タ が あま 
り 多 いと 不安 定 に な る こと が あり ます 。 こ れ は 、 い くつ と いっ た 明確 な 制限 が あ 
る わけ で は な く 、OS や 搭載 メモ リ 、 割 り 当 て メモ リ 、 ハ ー ド ディ スク 容量 、 
Web ブ ラウ ザ 、Web ブ ラウ ザ の バー ジョ ン な ど に よっ て 異な り ま す 。 し か し 、 
少な く と も 1000 行 程度 まで は 安定 し て 動作 し て いる の で 、 簡 単 な も の な ら あ ま 
り 問題 と な ら な いで し ょ う 。 
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JavaScript の 応用 範囲 


JavaScript は Web ペ ー ジ 上 の さま ざま な 要素 を 操作 する こと が で きま 
す 。 し か し 、 そ れ だ け で は な く プ ラグ イン や Java な ども 操作 する こと が で 
きま す 。 

も っ と も 代表 的 な の は Macromedia 社 の Flash で し ょ う 。 ムービー の 再生 、 
停止 、 フ レー ム の 指定 な ど を JavaScript か ら 行 うこ と が で きま す 。 こ れ に 
より 、Flash の ムー ビー と 連携 で きる と と も に 、Flash だ け で は 難し か っ た 
動作 も 実現 で きる こと に な り ま す 。 こ れ は Macromedia 社 の Shockwave に 
つい て も 同様 で す 。 こ れ ら の 機能 は 「Live Connect」 と 呼ば れ て いま す 。 

また 、Java ア プレ ッ ト で 公開 され て いる メソ ッ ド を 操作 する こと も で き 
ます 。Java ア プレ ッ ト の 作り 方 次 第 で す が 、HTML で 書か れ た フォ ー ム か ら 、 
Java ア プレ ッ ト を 操作 する こと が 可能 と な り ま す 。 
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住所 録 を 検索 する 





外部 JavaScript フ ァイル を 使っ た 簡易 デー タベース で す 。Web ペ ー ジ に た く 
さん の リス ト や デー タ を 表示 し 、 外 部 JavaScript フ ァイル を 用 いた 簡易 検索 シス 
テム を 実装 する こと が で きま す 。 


等 External DB by jayascrjpt - Micrpsoft Internet Explorer 





検索 し た い 名 前 を 入力 し て くだ さい 
名 前 :| 田 中 [ssgsh 一 ーーーーーーーー 名 前 を 入力 し て ここ を クリ ッ ク 


一 覧 

0123-3210 
1234-1234 
4321-4321 
5678-5678 
8765-8765 
7531-7591 




















2468-2468 
8642-8642 
3579-3579 
9753-9753 





抽出 され た デー タ の 一 覧 が 
別 ウ イン ドウ で 表示 され る 
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EMI 馬 EE searchaddress.html 


<htm1> 

<tit1e>Externa] DB by ]avascript</t ュ て ]e> 

<sty1e type="text/css"> 

く !-- 

th { background: #000080: 
co1or: #ffffff } 

・1ight-center { background: #fFfffff: 
text-a1ign: center } 

-1ight { background: #Ffffff } 

・dark-center { background: #dddddd: 
text-a1ign: center } 

・dark { background: #dddddd } 

ーー> 

</sty1e> 

<Script 1anguage="]avascript" src="./data.]s"></ scr1pt> 

<Script 1anguage="]avascript"> 


く !-- 


Var ij 


var cols 


3 
Var rows = 10: 


var amount = cols キ rowsi 


function dataSearch( ichar){ 
if( ichar == "" ){ 一 一 ーーーーーーーーーーー 一 一 (2②) 
alert( "検索 する 文字 列 を 入力 し て くだ さい "): 
document.iform.1char . 和 focus( ) : 
return falsej 
var f1ag = falsej 一 ーーー(③) 


var resu]tMindow = window.open("" "Resu1t" , "too1bar=no, 





回 1ocation=no, status=no, menubar=no, width=400, 

回 height=200") 
resu]1tMindow.document.write( "<h3> 検 索 結果 </h3>" ) : 
resu]1tMindow.document.write( "<hr /><table border='1'>"): 
for( ミ =0 ji<amount : =co1s ){ 


if( exDB[1] == ichar ){ 一 一 ーーーーーーーーーーーーーーーーー-④) 


いり 
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resu1tMindow .document.write( "< モ ェ ><td width=60>" + 
回 exDB[1i] + "</td>") 


resu1tMindow.document.write( "<td width=120>" + 


回 exDB[i+1] + "</td>")』 
resu1tM1ndow .document.write( "<td width=120>" + 
回 exDB[i+2] + "</td></tr>" ) 


f1ag = true, ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー(5⑤) 


if( flag == fa1se ){ ーーーーーー タ 
resu]tMindow. document .write( "<tr><td> 該 当 す る 文字 列 は あり ませ ん 
回 </td></t テ > " ) 


} 


resu]tM1ndow.document.write( "</table>" ) 


resu]tM1ndow.document.c1ose( ) : ーーーーー ーー 一 ーーーーーーーーー( の 








function printData( ){ 
document.write( "<table border='O'>"): 
document .write( "<tr><th> 名 前 </th><th> 都 道府県 </ モ h><th> 電 話 番号 
回 </th></tr>" ) 
for( 1=O : <amount : +=co1s ){ 
させ f( ヨ 3%2.==.O ){ 


document.write( "<tr><td width='60' c1ass='1ight- 





回 center'>" + exDB[i] + "</th>"): 
document .write("<td width='120' c1ass='1ight'>" + 
回 exDB[i+1] + "</td>") ぉ 
document.write( "<td width='120' c1ass='1ight'>" + 
回 exDB[i+2] + “</td></tr>" ) 
} 
else{ 
document.write( "<tr><td width='60' c1ass='dark- 
回 center'>" + exDB[i] + "</th>" ): 
document.write( "<td width='120' c1ass='dark'>" + 
回 exDB[i+1] + "</td>" )j 
document.write( "<td width='120' cl1ass='dark'>" 
回 exDB [1+2] + "</td></t エ >" ) 
+ 
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SECTION 13-2 を 住所 録 を 検索 する 


} 
document .write( "</ て ab1e>" ) : 
} 
//=-> 
</ Script> 
<body bgco1or="# 和 ff8dc"> 
<h3 > 住所 検索 </h3> 
<hr /> 
検索 し た い 名 前 を 入力 し て くだ さい <br /> 
<form name="1form"> 
名 前 : <1nput type="text" name="ichar" /> 


<input type="button" value="Search" 


回 onC1ick="dataSearch(document.1form.1char.value)" /> 


</form> 
<hr /> 
一 覧 <br /> 
<Script 1anguage="]avascript"> 
く !-- 
PrintData( ) 
7/--> 
</ script> 
</body> 
</htm1> 


var exDB = new Array( ): 


exDB[o] = "大 山 ": 
exDB[1] = "東京 ": 
exDB[2] = "0123-3210": 
exDB[3] = "浅野 ": 
exDB[4] = "埼玉 ": 
exDB[5] = "1234-1234": 


exDB[27] = "山田 ": 
exDB[28] = "神奈 川 ": 
exDB[29] = "9753-9753": 


data.jp 
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sauanro 識 





この サン プル は 「13-1 外部 ファ イル か ら リ スト を 作成 する 」 で 解説 し た も の 
を さら に 改良 し た も の で す 。 こ の サン プル で は フォ ー ム を 配置 し 、 そ こ で キー ワ 
ー ド を 入力 し て も らい 、 そ の キー ワー ド を 外部 JavaScript フ ァイル 内 の 文字 列 と 
比較 し て 検索 し ます 。 そ し て 、 検 索 結 果 を 新た に 開い た ウィ ンド ウ に 表示 し ます 。 

外部 配列 の 定義 や 読み 込み 方 法 は P.383 の サン プル と 同じ で す 。 詳し い 説 明 は 
そちら を 参照 し て くだ さい 。 

まず フォ ー ム を 用 意 し ます 。 ① の よう に フォ ー ム は テキ スト 入力 フィ ー ル ド と 
ボタ ン を 配置 し ます 。 ボ タン に は onClick イ ベン ト ハ ンド ラ を 設定 し 、 ク リッ ク 
され た ら テ キス ト 入 力 フ ィ ー ル ド に 入力 され た 文字 列 を 引数 に し て 、dataS 
earch 関 数 を 呼び 出す よう に し ます 。 

呼び 出さ れ た dataSearch 関 数 は 引数 を 変数 [ichar」 に 格納 し ます 。dataSe 
arch 関 数 で は 、 最 初 に の 記述 で ichar が 空 文字 で な いか を 調べ 、 空 文字 な ら ば 
アラ ー ト を 出力 後 、 カ ー ソ ル の フォ ー カ ス を テキ スト 入力 フィ ー ル ド に 設定 し 、 
dataSearch 関 数 か ら 抜け ます 。 

空 文 字 で な いか を 調べ 終わ っ た ら 、 次 に 検索 し た 結果 、 該 当 す る 文字 が あっ た 
か な か っ た か を 保存 する 変数 [flagq」 を 用 意 し ます (3③ の 箇所 )。 こ の flag の 値 は 最 
初 「false」 に 設定 し て お き 、 検 索 し た 結果 、 該 当 す る 文字 列 が あっ た と ころ で 
「true」 に 設定 し ます 。 こ こま で 終わ っ た ら 検 索 結果 を 表示 する 「resultWin」 ウ 
ィ ン ド ウ を 開き ます 。 

次 は 検索 する 部 分 で す 。 検 索 は (④ の よう に 引数 と し て 受け 取っ た 変数 ichar と 
exDB[i] を 比較 し て いき ます 。 カ ウン タ i は for 文 の 継続 処理 に 「i+=cols」 と 設定 
され て いる た め 、3 ず つ 増 加 し て いき ます 。 つ まり exDB 配 列 の 添え 字 は 3 の 倍数 
と な る わけ で す が 、 今 回 は カラ ム が 3 つ あ る の で そう し て あり ます 。 同じ だ っ た 
場合 に は 該当 し た 配列 要素 か ら 3 つ 分 を resultWin ウ ィ ン ド ウ に 出力 し 、⑤ の よ 
うに 変数 flag を true に し ます 。 こ の 処理 を 配列 の 要素 の 個数 まで 繰り 返し ます 。 

この 文字 列 を 比較 する 処理 が 終わ っ た 後 で 、 変 数 flag が false だ っ た な ら ば 、 
該当 する 文字 列 が 配列 内 に な いと し て 、⑧⑥ の よう に 、 ア ラー ト を 表示 する 処理 を 
行い ます 。 

ここ まで で 検索 お よび 表示 処理 が 終わ っ た の で 、⑦ で resultWin ウ ィ ン ド ウ の 
document オ ブ ジ ェクト を 閉じ ます 。 こ の 処理 を 行わ な いと 動作 が 不安 定 に な 
っ た り エ ラー に な っ た り し ます 。 こ の スク リプ ト で は これ 以外 に printData 関 数 
を 用 意 し て 、Web ペ ー ジ を 読み 込ん だ と き に 一 覧 表 を 作成 する 処理 も 行っ て い 
ます 。 

この よう な スク リプ ト で 、 簡 易 デ ー タ ベー ス を 実現 する こと が で きま す 。 この 
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SECTION 13-2 住所 録 を 検索 する 


デー タベース は 一 度 フ ァイル を ダウ ン ロ ー ド し て し まえ ば 、Web サ ー バ ー と コ 
ネ ク シ ョ ン す る こと な し に 検索 を か ける こと が で きま す 。 た だ し 、 こ の 処理 は 比 
較 的 重い の で 、 あ まり 大 き な デ ー タ を 扱う の に は 向い て いま せん 。 
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最近 、 オ ー プ ン ソ ー ス と いう 言葉 を よく 聞き ます 。 オ ー プ ン ソ ー ス に より 
開発 され て いる 代表 的 な ソフ トウ ェ ア と いえ ば Linux で す 。 ご 存じ の よう に 
Linux は 、 さ ま ざ ま な 人 の 協力 に より 、 急 速 に 改良 が 加え られ て いる UNIX 
系 の OS で す 。 

そし て 、Mozilla も オー プン ソー ス に より 開発 され て いま す 。 そ う 、 
NN6 の コア と な っ た ソフ トウ ェ ア で す 。2001 年 11 月 現在 、Mozilla0.9.5 
と 呼ば れる バー ジョ ン に な り 、 出 荷 は 間近 と いう 状態 で す 。 

た だ し 、Mozilla の 開発 は オー プン ソー ス と し て あま りう まく いっ て いる 
と は いえ ませ ん 。 コ ミュ ニテ ィ の 形成 が うま くい っ て いな いた め 、 開 発 が な 
か な か 進ま な いよ う で す 。 と は いえ 、 革 新 的 な HTML レ ンダ リン グエン ジン 
や 、W3C 準 拠 の DOM な どの 実装 は 進ん で いま す 。 見 た 目 は 、 次 の よう に 
NN6 と ほとん ど 同 じ で す 。 


>lmlal 
ーー ニュ ゴー こい 





J ほ 9 9 の 09 に ニニ ニニ __ gs < 賠 
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Getting Involved with Mozilla 











オー プン ソー ス と し て 開発 を 行 お うと し て いる ソフ トウ ェ ア が いく つか あ 
り ま す が 、 成功 の 鍵 は コミ ュ ニ ティ の 形成 と いっ た 部 分 に あり そう で す 。 


391 


suanro 開 






4 遼 い 較 
デー タ を ソー ト す る 


X ^ 部 











外部 ファ イル に 書き 込ん で ある 住所 を 読み 込ん で き て 、 そ の 中 身 を ソー ト し て 
表示 する こと が で きる スク リプ ト で す 。 一 覧 表 な ど で は 、 目 的 の も の を 探す の に 
検索 や ソー ト な どの 機能 は 非常 に 重要 な 機能 で す 。 JavaScript で も 当然 組み 込む 
こと が で きま す 。 





ファ イル 衣 業 D 表示 お 気 に 入 D⑳ ウー ル CD へ プ ⑪ 


の の Me 支 5moo W7o の G 








ここ を クリ ッ ク 
する と .… 


Ohysms 大山 東京 0123 
Eda 江田 埼玉 1234-1234 
Ohnshi 大西 「 葉 4321-4321 
Kohmyashi 小林 東 5678-5678 デー タ の 一 覧 が 
Tanska 田中 山梨 765-8765 表示 され る 
Shimgu 清水 長野 1357-1357 NG 
Ayano 綾野 宮城 7531-7531 
Nakamurs 中 村 栃木 2468-2468 
Hama 浜 新潟 8642-8642 
Murmtami 村上 大 阪 3579-3579 


Yamada 山田 神奈 川 9753-9753 


| 逢 ペー ジ 放 表地 さま し た イン トラ ネッ ト 


Microsoft Internet Explorer 


ファイル) 論 業 (D 表示 お 気 に ADQ : 


向 F や 
@ の 回 人 の we ば 





① AM2 


smcA0 結 テ 7 の 








デー タ が 昇順 に こち ら を クリ ッ 
ソー ト さ れる ク す る と 、 降 順 
に ソー ト す る 





7531-753 
Eda 1234-1234 
Hama た 9642-8642 

Kobayashi 5678-5678 

Murakam 3579-3579 

Nakamura p 2468-2468 
Ohnishi 葉 4321-4321 

Ohyama 











Shimzu 357 


nska 8765-8765 


Yamada 8753-875 


選 イン ラッ ト 








生 の 入 5" CE Sort.html 


<htm1> 

<tit1e>Sort 1ist</ ュ ト ]e> 

<sty1e type="text/css"> 

く !-- 

th { background: #000080: 
color: 井 和 fffff } 

・1ight-center { background: #ffffff: 
text-a1ign: center } 

・1ight { background: #ffffff } 

・dark-center { background: #dddddd: 
text-a1ign: center } 

・dark { background: #dddddd } 

ーー> 

</sty1e> 

<script 1anguage="]avascript" src="./data2.]s"></script> 一 一 ①) 

<Scr1pt 1anguage="]avascript"> 

く !-- 

Var ij 


Var arrayLength = exDB.1ength: 一 一 一 一 一 (7) 


function printData( sortOrder){ 


Var msgi 


var data = new Array( ) : 一 一 一 一 (⑤) 
if(sortOrder=="asc"){ ーーーーーーー ーー 一 (2) 


exDB. sort( ) 
} 
e1se if(sortOrder=="desc"){ 


exDB . sort( ) .reverse( ) : ーーーーーーーーーーーーーーーーーー ーー(③) 


msg = "<table border='0'>"』 ーーーーーーーー ーー ーー-④② 
msg = m5g + "<tr><th width='100'> ア ルフ ァ ベ ッ ト </th> 

回 <th widht='80'> 名 前 </th><th width='80'> 都 道府県 </th> 

回 <th width='120 "> 電話 番号 </th></t ェ > " : 


for( i=0 j』 i<arrayLength j』 i++ ){ 
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data = exDB[i].sp1it(","): 一 ーーーーーーーーーーーーーーーーーーー④ 


if( 3i%2 == 0 ){ 
msg = msg + "<tr><td c1ass='1ight-center' 


回 width='100'>" + data[O] + "</td>『: 
msg = msg + "<td cl1ass='1ight' width='80'>" + data[1] 
回 + "</td>『 
msg = msg+ "<td class='1ight' width='80'>" + data[ 2] 
回 + "</td> 
msg = msg + "<td cl1ass='1ight' width='120'>" + data[3] 
回 + "</td></tr>" ュ 
} 
el1se{ 
msg = msg + "<tr><td cl1ass='dark-center' 
回 width='100'>" + data[0O] + "</td>『: 
msg = msg + "<td cl1ass='dark' width='80'>" + data[1] 
回 + "</td> 
msg = msg + "<td c1ass='dark' width='80'>" + data[2] 
回 + "</td>" 
msg = msg+ "<td class='dark' width='120'>" + data[3] 
回 + "</td></tr>『 
} 
} 


msg = m5g + "</table>": 
document .getE1ementByTd( "disp1ayPane" ) .innerHTML = msg 


画 ) 
〇 77--> 
民 </ script> 
に <body bgco1or="#fff8dc" on1oad="printData('')"> 
<h3> ソ ー ト を する </h3> 
い <hr /> 

<form name="myForm"> 
<1nput type="button" va1ue=" 昇 順 " 


回 onc1ick="printData('asc')" /> 

<input type="button" value=" 降 順 " 
回 onc1ick="printData('desc')" /> 
</ 和 form> 
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<div 1d="disp1ayPane"></div> 
</body> 
</htm1> 


datagjjs 
var exDB = new Array( ) 


exDB[0] = "Ohyama, 大山, 東京,.0123-3210"j 
exDB[1] = "Eda, 江 田 , 埼 玉 ,1234-1234" 
exDB[2] = "Ohnishi, 大西, 千葉 ,4321-4321"j 
exDB[3] = "Kobayashi 小林, 東京,5678-5678": 
exDB[4] = "Tanaka, 田 中 山梨 ,8765-8765"j 
exDB[5] = "Shimizu, 清 水 , 長 野 ,1357-1357" 
exDB[6] = "Ayano, 綾 野 , 宮 城 ,7531-7531": 
exDB[7] = "Nakamura, 中 村 栃木,2468-2468": 
exDB[8] = "Hama, 浜 , 新 潟 ,。8642-8642": 
exDB[9] = "Murakami 村上, 大阪 。3579-3579": 
exDB[10] = "Yamada, 山 田 , 神 奈川 ,.9753-9753": 


全球 WM 「 王 は -] 


この スク リプ ト で は 、 外 部 ファ イル に 用 意 さ れ て いる 住所 の リス ト を 、Web 
ペー ジ 上 で ソー ト す る スク リプ ト で す 。 

この スク リプ ト で 読み 込む ファ イル は data2.js と いう ファ イル に な っ て お り 、 
配列 の 1 つの 要素 内 に アル ファ ベッ ト 、 名 前 、 都 道府県 、 電 話 番号 が 「,] (カン マ ) 
を 区 切り 文字 と し て 1 つ に な っ て 入っ て いま す 。 こ れ を ① の 部 分 で <script> タ グ 
に より 読み 込ん で いま す 。data2.js 内 で は 先頭 で 配列 の 宣言 を 行い 、 そ の 後 配 列 
の 要素 に 値 を 代入 し て いま す 。 

表 を 表示 し て いる の は 、printData 関 数 で す 。 こ の 関数 は Web ペ ー ジ が ロー 
ド さ れ た と き の onload イ ベン ト ハ ンド ラ 、 ボタ ン 、 ボタ ン を ク 
リッ ク し た と き の onclick イ ベン ト ハ ンド ラ に より 呼び 出さ れ ま す 。 こ の 関数 で 
は アル ファ ベッ ト に より 並び 替え を 行い ます 。 

printData 関 数 は 、 引 数 を 取り ます 。 こ の 引数 sortOrder に より どの よう に 
ソー ト を する の か を 決め ます 。 printData 関 数 で は まず の よう に 引数 
sortOrder に 与え られ た 値 の 内 容 を 確認 し ます 。「asc」 が 与え られ て いる 場合 に 
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saamro 較 


S き E 四 ぼ ! 


ャ 


は 昇順 に 、「desc」 が 与え られ て いる 場合 に は 降順 に 、 そ れ 以 外 の 場合 に は と くに 
並び 替え の 処理 を 行い ませ ん 。 

並び 替え に は sort メ ソ ッ ド と reverse メ ソ ッ ド を 用 いて いま す 。 昇順 の 場合 に 
は 単純 の exDB 配 列 を ソー ト し ます 。 降 順 の 場合 に は 一 度 昇順 に 並べ な お し て か 
ら 、 再 度 降順 に 並べ な お し て いる の で ③ の よう な 記述 に な っ て いま す 。 

並べ な お し た ら 後 は 表 を 表示 する だ け で す 。 し か し 、 今 回 の exDB 配 列 の 要素 は 
「,」 で 複数 の 値 が 連結 され た 形 に な っ て いま す 。 そ の た め 、split メ ソ ッ ド を 使っ 
て 値 を 分 割 し ます (④) 。 分 割 さ れ た 結果 は 配列 に 格納 され る の で data 配 列 を 作 
成 し (5)、 そ れ に 分 割 結果 を 代入 し て いま す 。 

配列 デー タ に は 以下 の よう に デー タ が 格納 され ます 。 





ここ まで 分 割 で きた ら 、 変 数 msg に 表示 し た い 内 容 を 連結 し て いき ます 。⑤ の 
箇所 か ら 始 まっ て いま す が 、 こ の 表 で Web ペ ー ジ に 出力 し た い 部 分 は すべ て 変 
数 msg に 格納 され て いき ます 。 

表 の 作成 は for 文 が 用 いら れ て いま す 。 今回 for 文 は exDB 配 列 の 要素 の 数 と 同 
じ だ け 処 理 を 繰り 返し ます 。 こ の た め に ⑦ で exDB 配 列 の 個数 を length ブ プロ パテ 
ィ を 用 いて 取得 し て いま す 。 

for 文 中 で は 、 見 た 目 の た め に 2 で 割り 切れ る 行 と 割り 切れ な い 行 で 背景 色 が 変 
わる よう に 処理 を し て いま す 。 ス タイ ル シ ー ト で 定義 され た クラ ス を それ ぞ れ が 
異な る こと で 表 を 見 や すく し て いま す 。 

最後 に 、Web 上 に 表示 する 部 分 で す 。Web 上 に 表示 し た い 部 分 は すべ て 変数 
msg に 格納 し て きま し た 。 こ れ を Web ペ ー ジ 上 に 配置 され て いる <div> 要 素 の 
部 分 に 代入 し ます 。<div> 要 素 の 特定 に は getElementByld メ ソ ッ ド を 用 いて 
いま す 。 特定 され た 要素 の innerHTML ブ プロ バテ ィ に 変数 msg を 代入 する こと に 
より Web ペ ー ジ 上 に 表 を 表示 し ます 。 

この よう に 比較 的 簡単 に ソー ト は 実現 で きま す 。sort メ ソ ッ ド は 昇順 、 降 順 、 
文字 コー ド 順 な ど が 指定 で きる の で 、 実装 し だ いで は さま ざま な こと を 実現 で き 
ます 。 

な お 、Macintosh 版 IE で は 、innerHTML プ ロ パ ティ を サポ ー ト し て いな い 
の で 動作 し ませ ん 。 
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APPENDIX 





xiqaNaaav 詳 





オフ ジェ タ ト 一 臣 





オブ ジェ クト と それ に 関連 付け られ た メソ ッ ド 、 プ ロ パ ティ を 紹介 し て お きま 
す 。 こ こ で 紹介 する も の は 、JavaScript1.3 ま で の 規格 の 中 か ら 、 よ く 使 われ る 
も の を 中 心 に 取り 上 げ て いま す 。 

各 メ ソ ッ ド や プロ パテ ィ は 、 表 の 書式 の 中 に 記載 し て いま す 。 な お 、 書 式 の 
「obj」、「Window] は 省略 する こと が で きま す 。 


較 anchor オ ブ ジ ェクト 
Web ペ ー ジ 中 の リン ク を 扱う オブ ジェ クト で す 。 








| ドキ ュ メ ント 内 の アン カー の 数 を 返す e 


較 applet オ ブ ジ ェクト 
JavaApplet を 扱う オブ ジェ クト で す 。 


_objApplet.length _ | ドキ ュ メ ント 内 の アプ レッ ト の 数 を 返す 


較 argument オ ブ ジ ェクト 
関数 の 引数 を 扱う オブ ジェ クト で す 。 


objArgument.length | 関数 の 引数 の 数 を 表す 





_objAnchor.length 
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較 array オ ブ ジ ェクト 
配列 要素 を 扱う オブ ジェ クト で す 。 










objArray.concat(objArray1, 配列 を 連結 する 

objArray2, …, objArrayN) 
objArray. 35nCRSD0 _| 配列 要素 を Char で 連結 し た 文字 列 を 返す 
objArray.pop() 請 計 5 配列 の 未 尾 の 要素 を 返す 
_objArray.push(element Data) 配列 の 未 尾 に 要素 を 追加 する 
objArray. reverse() 配 序 を 反転 する - 
objArray.shiftO0 先 『 素 を 削除 する 
objArray.slice(start, end) 配列 抜き 出す 。 


objArray. sort(CompareFunction) 配列 要素 を 並び 替え る 
objArray. splice(index1, element1) 配列 要素 を 置換 する 
objArray.unishift(element Data) 配列 の 先頭 に 要素 を 追加 する 


objArray.length | 配列 の 個数 を 返す 、 設 定 する 


較 Date オ ブ ジ ェクト 
日 付 ・ 時 刻 情報 を 扱う オブ ジェ クト で す 。 


(PS さき 


objDate.getDate() 日 付 を 取得 する 。 9 3 



































objDate.getDay() ーー 曜日 を 取得 する 
objDate.getFullYear) | 西暦 (4 桁 ) を 取得 する 
_objDate.getHours0 こ - | 時 を 取得 する に の 
_objDate. getMilliseconds() ミリ 秒 を 取得 する 


_objDate.getMinutes() 


objDate.getMonth() 


| objDate. getseconds0 


objDate.qetTime() 


_objDate. getTimezoneOffset0 | 























xiqNadav 較 














| objDate. getUTCFullYear() 


objDate.getUTCHours() 世界 協定 時 の 時 を 取得 する 




















xiqaNadav 較 


書式 
objDate.getUTCM seconds() 


| objDate. getUTCMinutes0 


objDate.getUTCMonth() 
objDate.getUTCSeconds() 


objDate.getUTCYear0 。 
objDate.getYear() 





objDate.parse (date) 


objDate.setDate(date) 
objDate. setFullYear(year) 
objDate. setHours(hour) 
objDate.setMilliseconds 
(milliseconds) 
objDate.setMinutes(minutes) 
objDate.setMonth(month) 

_objDate.setTime(time) 

_objDate.setUTCDate(date) 
objDate.setUTCFulIYear(year) 
objDate.setUTCMilliseconds 
(milliseconds) 

| objDate. setUTCMinutes(minute) 
objDate. setUTCMonth(month) 
objDate. setUTCSeconds(seconds) 
objDate. setYear(year) 
objDate. toGMTString 
objDate. toLocaleString_ 
objDate.toUTCString 
objDate.UTC(year,month,day 
[hrs,hrs,min,sec,ms]) 





| 世界 協定 時 の 月 を 取得 する 





内 容 
ミリ 秒 を 取得 する 


世界 協定 時 の 分 を 取得 する 








世界 協定 時 の 秒 を 取得 する 
世界 協定 時 の 西暦 (2 桁 ) を 取得 する 
西暦 (2 桁 ) を 取得 する 

1970/1/1 00:00:00 か ら の ミリ 秒 を 
取得 する 

日 付 を セッ ト す る 

西暦 (4 杵 ) を セッ ト する 
時 を セッ ト す る ー 


ミリ 秒 を セッ ト す る 


分 を セッ ト す る 
月 を セッ ト す る 

時 間 を 設定 する 

世界 協定 時 の 日 付 を セッ ト す る 

世界 協定 時 の 西暦 (4 杵 ) を セッ ト す る 


世界 協定 時 の ミリ 秒 を セッ ト す る 
世界 協定 時 の 分 を セッ ト す る 

世界 協定 時 の 月 を セッ ト す る 

_ 世界 撫 定時 の 秒 を セッ ト す る 。 








5 を る 


1970/1/1 00:00:00 か ら 指定 時 刻ま で の 
ミリ 秒 を 取得 する 











還 Document オ ブ ジ ェクト 


<body>-<body> に よる 表示 領域 の 操作 を 行う オブ ジェ クト で す 


6 メソ ンド 。。 《 上衣 皇 





document.clear() 


内 容 
ドキ ュ メ ント を クリ ア す る 





document. close() 


、 ド キュ メン ト を 閉じ る 





| document.open([mimeType]) 


ドキ ュ メ ント を 開く 





_document. write(string) 


document. writeln(string) 








ドキ ュ メ ント に 出力 する 
ドキ ュ メ ント に 出力 する 
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document.alinkColor 


astModified 
document. linkColor 
document. location ー 


docu ttitle 
docu t.URL 
document. vlinkColor 









document. referrer 軸 e| 


内 容 
アク ティ ブリ ンク の 色 を 参照 設定 する 





| 文字 色 の 参照 、 設 定 を する 


文書 の URL の 参照 EE 
リン ク 済 み の 色 の 参照 、 設 定 を する 














還 event オ ブ ジ ェクト 


イベ ント を 扱う オブ ジェ クト で す 。 








【@ プ ロバ テイ =。 時 丘 
内 容 
event.height | イベ ント の 起こ っ た 高 さ を 取 得する _ 
event. keyCode ] イベ ン ト を 起こ し た キー の Unicode を 参照 する 
| event. modifiers | イベ ント を 起こ し た 修飾 キー 
event.type の ト タ イ ブ を 取得 する 3 
event.which イベ ント を 起こ し た キー の ISO-Latin-1 コ ー ド を 参照 する 
event.width | バン ト の 起こ っ た 幅 を 取得 する 
event.x イベ ント の DX 座標 を 取得 する ーー ー 
event.y イベ ント の Y 座 標 を 取得 する 











還 Element (Button) オブ ジェ クト 
<input type="button "> に よる ボタ ン を 扱う オブ ジェ クト で す 。 


し ちと ジ ん 4 に 


document.objForm.objButton.blur() フォ ー カ ス を 外す 


内 容 





_document. objForm.objButton.click() 性 クリ ッ ク を する 








document.objForn.objButton. focus() | フォ ー カ ス を する 














xiqNadav 較 





document. objForm.objButton.type | フォ ー ム の タイ プ を 取得 する 
document. -objForm.objButton.value フォ ー ム の 値 を 取得 する 還 還 


document.objForm.objButton.narme フォー ム の 名 前 を 参照 する | 








較 Element (Checkbox) オブ ジェ クト 
<inputtype="checkbox"> に よる チェ ッ ク ボ ックス を 扱う オブ ジェ クト で す 。 


し と た 用 















document.objForm.objCheckbox.blur() フォ ー カ ス を 外す 
document.objForm.objCheckbox.focus() フォ ー カ ス を する 
document.objForm.objCheckbox.click() クリ ッ ク を する 
【@ ブ ロバ ティ 。。 。 。〈。 Ss 
書式 
document.objForm.objCheckbox.checked | 状態 を 参照 、 設定 する 
document.objForm.objCheckbox. | 初期 状態 を 参照 、 設定 す る 
defaultChecked | - 
document.objForm.objCheckbox.name | フォ ー ム の 名 前 を 参照 する | 
document.objForm.objCheckbox.type 」 フォ ー ム の タイ ブ を 取得 する | 
| document. objForm.objCheckbox.value | フォ ー ム の 値 を 取得 する 





剛 Element (Hidden) 
<input type= "hidden "> に よる 隠し 要素 を 扱う オブ ジェ クト で す 。 







| フォ ー ム の 名 前 を 参照 する 
フォ ー ム の タイ を 取得 する 


3 呈 還 語 .objHidden. Value | フォ ー ム の 値 を 取得 する 
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層 Element (Option) オブ ジェ クト 
<option> に よる 選択 項目 を 扱う オブ ジェ クト で す 。 








document.objForm.objOption. 初期 状態 を 参照 、 設定 する 
defaultSelected 
document.objForm.objOption.index | 参照 番号 を 参照 する 
document.objForm.objOption.Iength オプ ショ ン の 個数 を 参照 する 
document.objForm.objOption.selected | 選択 状態 の 参照 を する 
document.objForm.objOption.text | テキ スト を 参照 、 設定 する 
document.objForm.objOption.value フォ ー ム の 値 の 参照 、 設 定 する 








還 Element (Password) オブ ジェ クト 
<input type="passwd "> に よる パス ワー ド フ ォ ー ム を 扱う オブ ジェ クト で 





document.objForm.objPassword.blur() フォ ー カ ス を 外す ー 
document.objForm.objPassword.focus() フォ ー カ ス を する 
document.objForm.objPassword.select() テキ スト の 選択 を する 








document.objForm.objPassword. 

defaultValue | SEA 
document.objForm.objPassword.name| フォ ー ム の 名 前 を 参照 する 
document.objForm.objPassword.type フォ ー ム の タイ プ を 取得 する 


ディ フォ ルト 文字 の 参照 、 設 定 する 


document.objForm.objPassword.value | フォ ー ム の 値 を 取得 する 
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還 Element (Radio) オブ ジェ クト 
<input type="radio "> に よる ラジ オ ボ タ ン を 扱う オブ ジェ クト で す 。 





document.objForm.objRadio.blur() | フォ ー カ ス を 外す 


テキ スト の 選択 を する 


の | 
document.objForm.objRadio.focus() 」 フォ ー カ ス を する 


し ァ ん mA と 大 1 障 村 や 。 









状態 を 参照 、 設定 する 


初期 状態 を 参照 、 設 定 する 


document.objForm.objRadio.checked 
document.objForm.objR< efaultChecked | 初期 状態 
document.objForm.objRadio.length オプ ショ ン の 個数 を 参照 する 
document.objForm i フォ ー ム の 名 前 を 参照 す 


を 取得 する 


、。 | フォ ー ム の 値 を 取得 する 















還 Element (Reset) オブ ジェ クト 
<input type="reset"> に よる リセ ッ ト ボ タン を 扱う オブ ジェ クト で す 。 


し と ジル 3 





document.objForm.objReset.blur() | フォ ー カ ス を 外す 


| document.objForm.objReset.click() 


document.objForm.objReset.focus() 














プロ パテ ィ M 





内 容 
_document.objForm.objReset.name フォ ー ム 名 の 名 前 を 参照 する 
_document.objForm.objReset.type フォ ー ム の タイ ブ を 取得 する 


document.objForm.objReset.value フォ ー ム の 値 を 取得 する 
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還 Element (Select) オブ ジェ クト 
<select> 一 </select> に よる 選択 フォ ー ム を 扱う オブ ジェ クト で す 。 





document.objForm.objSelect.blur() フォ ー カ ス を 外す 


document.objForm.objSelect.focus() フォ ー カ ス を する 








CETE 旨 還 ih。 
document.objForm.objSelect.length | 選択 肢 の 個数 を 参照 する 
document. objForm.objSelect.name | フォ ー ム の 名 前 を 参照 する 
document.objForm.objSelect. options[N] N+ 1 番目 の 選択 肢 を 参照 する 

選択 され て いる 選択 の 番号 を 
document.objForm.objSelect.selectedIndex | 参照 する 
document.objForm.objSelect.type | フォ ー ム の タイ ブ を 取得 する 
document.objForm.objSelect.value | フォ ー ム の 値 を 取得 する 





層 Element (Submit) オブ ジェ クト 
<input type="submit "> に よる 送信 ボタ ン を 扱う オブ ジェ クト で す 。 


document.objForm.objSubmit.blur() フォ ー カ ス を 外す 
document.objForm.objSubmit.click() クリ ッ ク を する 
document.objForm.objSubmit.focus() | フォ ー カ ス を する 


寺 式 


document.objForm.objSubmit.name | フォ ー ム の 名 前 を 参照 する 


document. objForm.objSubmit.type フォ ー ム の タイ プ を 取得 する 
document.objForm.objSubmit.value | フォ ー ム の 値 を 取得 する 
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xiqNadav 較 


層 Element (Text) オブ ジェ クト 
<input type="text"> に よる 1 行 テ キス ト 入 力 フォ ー ム を 扱う オブ ジェ クト 
で す 。 


(@ メ ソン ッ ド 。〈 〈 XI】iI 






document.objForm.objText.blur0 フォ ー カ ス を 外す 
document.objForm.objText.focus() フォ ー カ ス を する 


document.objForm.objText.select() クリ ッ ク を する 









document.objForm.objText.name | フォ ー ム の 名 前 を 参照 する 


document.objForm.objText.type  、 フォーム の タイ プ を 取得 する 
document.objForm.objText.value 」 フォ ー ム の 値 を 取得 する 








層 Element (Textarea) オブ ジェ クト 
<textarea> 一 </textarea> で 囲ま れ た テキ スト エリ ア を 扱う オブ ジェ クト で 
す 。 












document.objForm.objTextarea.blur() フォ ー カ ス を 外す 








document.objForm.objTextarea.focus() | フォ ー カ ス を する 
document.objForm.objTextarea.select() | クリ ッ ク を する 
【@ プ ロバ テイ 。。 。〈《 


| デフ ォ ル ト 文 字 列 の 参照 、 
_ | 設定 ます る 


| フォ ー ム の 名 前 を 参照 する 


document.objForm.objTextarea.defaultValue 





_document.objForm.objTextareaname 
ru bjFo extarea.tyPe 
document.objForm.objTextarea.value フォ ー ム の 値 を 取得 する 
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還 Form オ ブ ジ ェクト 
<form> 一 </form> に よる フォ ー ム を 扱う オブ ジェ クト で す 。 


(ちと ち ジ 必 4p ココ 






document.objForm.reset() フォ ー ム の 内 容 を リセ ッ ト す る 


document。 objForm.submit() フォ ー ム を 送信 する 











【@ フ ロ ィ = 朱 水 

| document.objForm.action | 送信 先 の 参照 、 設 定 を する 

| document.objForm. encoding | エン コー ド 形式 の 参照 、 設定 を する 
| document. objForm.length ジオ 呈 ム 内 の 要素 の 個数 を 参照 する 
」 document.objForm.method | 送信 形式 の 参照 、 設定 を する 

document. objForm.name フォ ー ム の 名 前 を 参照 する 

document. objForm.target 送信 後 の URI の 参照 、 設定 を する 
較 Frame オ ブ ジ ェクト 

ウィ ンド ウ 内 の フレ ー ム の 情報 を 扱う オブ ジェ クト で す 。 


objWindow.objFrame.blur() フォ ー カ ス を 外す 


objWin bjFrame.c arlnterval(intervallD) 
objWindow. objFrame. .clearTimeout(timerID) 
objWindow.objFrame.focus() 


objWindow. objFrame. setlnterval(IntervallD) 


objWindow.objFrame.setTimeout(timerID) 























objWindow.objFrame.length | フレ ー ム の 個数 を 参照 する 。 
1 ] レー 人 の \ ン を 参照 、 











| は 














| top.objFrame - - トッ プ の 要素 を 参照 する 





407 





xianaaay 詳 


還 History オ ブ ジ ェクト 
Web ブ ラウ ザ の 持つ 履歴 情報 に つい て 扱う オブ ジェ クト で す 。 


し ちと ジ 少 用 






_objWindow.History.back0) 履歴 を 戻す 


objWindow.History.forward() | 履歴 を 進め る 





objWindow.History.go(N) 履歴 を N だ け 移 動 す る 
【@ プ ロティ ミミ マ 3 モモ 






内 容 
| 履歴 の 個数 を 参照 する 


objWindow.History.length 





還 !mage オ ブ ジ ェクト 
画像 に 関す る 情報 を 扱う オブ ジェ クト で す 。 


し ァ ん mA セ 交 』 


書式 内 容 
document.objlmage.border | 枠 幅 を 参照 する 
document.objlmage.complete | 読み 込み 状態 を 参照 する 
document.objlmage.height | 高 さ を 参照 、 設 定 す る 
document.objlmage.hspace | 文字 と の 間隔 ( 横 ) を 参照 する 








document.objlmage.Iength 画像 の 数 を 参照 する 
document.objlmage.lowsrc 低 解像度 の 画像 URI を 参照 、 設 定 する 
document.objlmage.name | 画像 の 名 前 を 参照 する 
document.objlmage.src | 画像 URI を 参照 する 
document.objlmage.vspace | 文字 と の 間隔 ( 縦 ) を 参照 する 
document.objlmage.width 画像 の 幅 を 参照 、 設定 す る 





較 Ink オブ ジェ クト 
Web ペ ー ジ 中 の リン ク の 情報 を 扱う オブ ジェ クト で す 。 









document.link[N].hash 


[N].he アン カー を 参照 、 設 定 する 
document.link[N].host 


ホス ト を 参照 、 設 定 する 








document.link[N].hostname | ホス ト 名 を 参照 、 設 定 する 
document.link[N].href リン ク を 参照 、 設定 する 
document.link.length | リン ク の 個数 を 参照 する 
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document.link[N].pathname _ | バス 名 を 参照 する 
ボート を 参照 する 
プロ トコ ル を 参照 する = 。 
CGI へ の 文字 列 を 参照 、 設 定 す る ] 
ター ゲッ ト を 参照 、 設 定 する 





























| documentL.link[N].target 








還 |ocation オ ブ ジ ェクト 
場所 (URL) に 関す る 情報 を 扱う オブ ジェ クト で す 。 


し とめ 4 5 末 





_location.reload() 


location.replace(URI) 


再読 み 込み を する 


URI へ 移動 する 












































し 9 内 容 
location.hash | アン カー を 参照 、 設定 する 
location.host | ホス ト を 参照 、 設 定 す る 
location.hostname ホス ト 名 を 参照 、 設定 する 
location.href | リン ク を 参照 、 設 定 する 9 
location.pathname バス 名 を 参照 する 
location.port ポー ト を 参照 する 
location.protocol プロ トコ ル を 参照 する 
location.search CGI へ の 文字 列 を 参照 、 設定 する 
還 Math オ ブ ジ ェクト 


数 学 的 な 処理 を 扱う オブ ジェ クト で す 。 



























Math.abs(x) 絶対 債 を 求め る _ 村 

Math.acos(x) アー クコ サイ ン を 求め る ー 

Math.asin(%) アー クサ イン を 求め 。 。 」 

Math.atan(X) アー クタ ンジ ェ ン ト を 求め る _ 計 

Math.atan2(xy) x、y か ら 角 度 を 求め る ーー 」 
| Math.ceil%) 切り 上 げ て 整数 に する ー 











xiaNadav 識 





EE 

















_Math.cos) _ | コサイン を 求め る ーー 
| Math.exp() | 設 を 求め る ーー 
Math.floor(x) _ | 切り 下げ て 整数 に する = 
ログ の 値 を 求め る 了 
/) X、 y の 大 きい ほう を 求め る 
-min(xy) x、y の 小さ い ほ う を 求め る 
Math. pow(x,y) x の y の べき 乗数 を 求め る 
_Math.random() | 0 か ら 1 の 乱数 を 発生 させ る 
Math.round(x) _ | 四捨五入 する 
Math.sin(x) サイ ン を 求め る 
Math.sqrt(%) | 平方 根 を 求め る 
Math.tan(X) タン ジェ ント を 求め る 























内 容 
| 自然 対数 の 値 (e=2.718) 

Math.LN10 | 10 の 自然 対数 の 値 

_ Math.LN2 。 | 2 の 自然 対数 の 値 

Math.LOG10E 10 を 底 と する e の 自然 対数 の 値 

Math.LOG2E | 2 を 底 と する e の 自然 対数 の 値 

Math.Pl_ 円 周 率 の 値 

Math.SQRT1_2 2 の 平方 根 の 1/2 の 値 
| Math.SORT2 。 | 2 の 平方 根 の 値 間 細 旨 
還 MineType オ ブ ジ ェクト 


プラ グイ ン の MIME タ イプ を 扱う オブ ジェ クト で す 。 











navigator.mimeTypes[mimetype]l. | ? プラ グイ ン の 詳細 を 参照 する 

| description 。 ll ii 
Ni 00000 | フラ グイ ン の 汰 胡 を 参照 する 

| navigator.mimeTypes. len9th 。 _MimeType の 数 を 参照 する 。 
navigator.mimeTypes[mimetype]. ブラ グイ ン の 拡張 子 を 参照 する 

| suffixes 。 CD を 
navigator.mimeTypes[mimetype]. MIME タ イブ の 名 前 を 参照 する 

type 
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還 navigator オ ブ ジ ェクト 
Web ブ ラウ ザ 固 有 の 情報 を 扱う オブ ジェ クト で す 。 


navigator.javaEnabled() | Java が 動作 する か を 参照 する 








navigator.apDCodeName | コー ド 名 を 参照 する 











navigator.appName | アプ リ ケ ー ショ ン 名 を 参照 する _ 
navigator.appVersion | バー ジョ ン を 参照 する 
navigator.language 十 言語 セッ ト を 参照 する 。 
navigator.platform _| プラ ッ ト フ ォ ー ム を 参照 する 
navigator.userAgent | Web ブ ラウ ザ 情 報 を 参照 する 

還 Number オ ブ ジ ェクト 
数 値 を 扱う オブ ジェ クト で す 。 

【@ フ ロビ ティー 。 
Number.MAX VALUE 拓 二 | 
Number.MIN VALUE 。 | 最小 値 
Number. .NaN _ 数 値 以外 ー 
Number.NEGATIVE_INFINITY | 負 の 無限 大 
Number. .POSITIVE_INFINITY 正 の 無限 大 

還 Plugin オ ブ ジ ェクト 
プラ グイ ン を 扱う オブ ジェ クト で す 。 

6 ハ ソ ンド 。。 EE 


navigator.pluginslindex].refresh() ブラ グイ ン を 読み 込み 直す 
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xiaNidav 較 


し ァ ん AE 呈 4 Et 





navigator.plugins[index].description プラ グイ ン の 詳細 を 参照 する 




















_navigator.pluginslindex]. filename | プラ グイ ン の ファ イル 名 を 参照 する 
navigator.plugins.length 、 プ ラグ イン の 個数 を 参照 する 
navigator.plugins[index]. type | プラグ イン の タイ プ を 参照 する 
還 Re9Exp オ ブ ジ ェクト 


検索 パタ ー ン を 扱う オブ ジェ クト で す 。 


し ちと ジル 隊 





OMIRie9END。 exec(str) 


objRegExp.test() 




















CPUE 補 hs 
_objRegExp.$1 一 $9 dl バタ ー ン と 一 致し て いる 部 分 を 参照 する 
_objRegExP.$* _ | 改行 コー ド の 設定 を すす る 。 
objRegExp.%5、 。 | 検索 文字 の 指定 を する 
_objRegExp.g global | | 検索 を 繰り 返し て 行う か どう か を 参照 する 本 | 
objRegExD. ingnoreCase | 大 文字 と 小文字 を 区 別 す る か どう か を 参照 する 較 





_objRegEx 検索 文字 の 指定 を する 


_o jRegExp.|astIndex 


objRegExp. ーー に マッ チ し た 人 を 参 昭 する 


_objRegExp. lastParen 


_objRegExp.leftContext | マッチ し た 左側 の 文字 列 を 参照 する 


objRegExP. multiline | 改行 コー ド を 参照 、 設 定 する 


_objRegExp.rightContext 」 マッ チ し た 右側 の 文字 列 を 参照 する 


objRegExp.source | パタ ー ン 文字 を 参照 する 
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還 screen オ ブ ジ ェクト 
画面 の 表示 に 関す る 情報 を 扱う オブ ジェ クト で す 。 










_screen. avaliWi ll 
| screen.colorDepth | 画面 の 色 深 度 を 参照 する 








| screen.height 」 画面 の 高 さ を 参照 する 昌 - 
screen. pixelDepth | オフ スク リー ン バ ッ ファ の 色 深 度 を 参照 する 
screen.width ー 画面 の 幅 を 参照 する 

較 String オ ブ ジ ェクト 
文字 列 を 処理 する オブ ジェ クト で す 。 

9 メソ ンド 。。 。〈。 

書式 内 容 

objString.anchor(anchor) アン カー を 設定 する 
objString.big() 大 きく する - 
objString.blink() 点滅 させ る 
objString.bold() 太字 に する 回 
objString.charAt(N) 1 文字 抜き 出す - 
objString.charCodeAt(N) unicode に 変換 する _ 
objString.concat(objString2[, .…ObjStringN]) 連結 を 行う 
objString.find(pattern) 検索 し 、 真理 値 を 返す 
objString.fixed() 固定 幅 フ ォ ン ト に する 
objString. fontColor(color) ー 色 を 設定 する 





objString. fontsize(size) 
objString. fromCharCode(code1[,… rcodeN]) 
objString. indexOf(pattern, startposition) 

1 objString. italics) 


フォ ント サイ ズ を 設定 する | 











objString. Jink(URI まま 
objString.match(pattern) 





検索 し 、 文字 列 を 返す 









































objString. replace(pattern, str) 間 還 細 当 | 置換 を 行う 5 
| objString io ーー = コ 検索 を 行い 、 先頭 位置 を 返す | 
に _ | 文字 列 を 切り 出す 
_objstring.small0 2 記 _ | 小さ くす る ー 
_objString. rar limit]) ー 員 | 指定 文字 で 分 割 する ーー 
objString.strike(0) _ _ | 打ち 消し 線 を 付け る | 
_objString.sub() ーー | 下 付き 文字 に する 
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xiaNaaav 較 


指定 位置 か ら 文字 列 を 切り 出す 


_ 指定 範囲 の 文字 列 を 切り 出 を 切り 出す 


上 付き 文字 に する 


大 文字 に 変換 する 。 












objString.length 


| 文字 列 の 長 さ を 参照 する 





還 window オ ブ ジ ェクト 


最上 層 の オブ ジェ クト で 、 多 く の オ ブ ジ ェクト を 含み ます 。Web ブ ラウ ザ そ 
の も の や 、 ダ イア ログ ボッ クス な ど を 扱う オブ ジェ クト で す 。 


@ メ ソ ッ ド 
CTOPEEGOErr 


objWindow.alert(str) 
objWindow.blur0 

objWindow. clearlnterval(intervallD) 
objWindow. -clearTimeout(timerID) 
objWindow. close() 
objWindow.confirm(str) 
objWindow. focus( 
objWindow.home() 






objWindow.moveBy(h, v) 


| o objWindow. rmoveTo y) 





| 絶対 位置 に スク ロー ル す る 


アラ ー ト を 表示 する 
フォ ー カ ス を 外す 
タイ マー を 解除 する 
タイ マー を 解除 する 
ウィ ンド ウ を 閉じ る 
| 確認 ダイ アロ グ を 表示 する 
フォ ー カ ス を あて る 
ホー ム に 戻る 

ウィ ンド ウ を h,V だ け 移 動 す 
る 

ウィ ンド ウ を Xy に 移動 する 









を 表示 する 


トト 間 
| 更 す る 


ウィ ンド ウ を 絶対 サイ ズ で 変 
更 する 








相対 位置 に スク ロー ル す る 








objWindow. scrollTo(% y) 


objWindow.setlnterval(intervallD) 


objWindow.setTimeout(timerlD) 











、 | 絶対 位置 に スク ロー ル す る 








タイ マー を 設定 する 











タイ マー を 設定 する 
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objWindow.closed 


_objWindow. defaultStatus 


objWindow.innerWidth 
objWindow.Iength 
objWindow.name 
objWindow.opener 
objWindow.outerHeight 
objWindow.outerWidth 
objWindow.parent 
objWindow.status 





3 | 初期 状態 の ス 
objWindow. innerHeight 虹 | 


内 容 
ウィ ンド ウ の 開閉 状態 を 参照 する 









ウィ ンド ウ の 内 側 の 高 さ を 参照 、 設定 する 


ウィ ンド ウ の 内 側 の 幅 を 参照 、 設定 する 
ウィ ンド ウ の 数 を 参照 する 
ウィ ンド ウ の 名 前 を 参照 する 
開い た ウィ ンド ウ を 参照 する 


ウィ ンド ウ の 外側 の 高 さ を 参照 、 設 定 する 


| ウィ ンド ウ の 外側 の 幅 を 参照 、 設定 する 


親 ウィ ンド ウ を 参照 する 


ステ ー タ スバ ー を 参照 、 設定 する 





古 その 他 の メソ ッ ド 、 プ ロ パ ティ 
次 に 紹介 する メソ ッ ド と プロ パテ ィ は 、 す べ て の オブ ジェ クト で 利用 で きる も 


の で す 。 


6 メソ ンド 。。 朱未 


設定 する 








escape(str) 












unescape(str) 





obj.toString() 抽 M ー 





ISO Latin 1 コー ド に 革 換 する 
eval(str) 、 | 実行 結果 を 取り 出す 、 
isFinite(number) | 有限 か どう か 調べ る 
isNaN(value) | 数 値 か どう か 調べ る 
parseFloat(string) | 浮動 小数 点 以下 を 取り 出す 
parselnt(s 整数 を 取り 出す 


| 文字 列 に 変換 する 





atin 1 コー ド を 文字 に 要 














void() | 何 も し な い 
【@ フ ロティ l 遇 還 





Infinity 


NaN 


」 正 の 無限 大 を 参照 する 


| | 数 値 で な い 
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xiqNaddav 較 


xiqaNadav 較 


A-2 





JavaScript で の 色 の 指定 方 法 


色 は 、Web ペ ー ジ を 制作 する 際 に は 非常 に 重要 な も の で す 。 し か し 、 あ まり 
見 た こと の な い 記 述 方 法 を 使っ た り 、Web ブ ラウ ザ や OS に よっ て 、 少 し ずつ 表 
現さ れる 色 が 異な っ た りす る た め 、 そ の 扱い は ちょ っ と 面倒 な “も の で す 。 た と え 
ば 、Windows と Macintosh で は 、 カ ラー マッ プ が 異な る た め 若 干 見 え 方 が 違 
いま す 。 JabaScript に 限ら ず 、 こ の OS に よる 表現 の 違い は 、 色 を 扱う 上 で 必ず 
ある 問題 で わる こと を 認識 し て お いて くだ さい 。 

JavaScript で は 、4 種 類 の 方 法 で 色 を 扱う こと が で きま す 。「 色 の 名 前 で 指定 」、 
「RGB16 進 数 で 指定 ]、「RGB256 進 数 で 指定 ]、 そ し て 「16777216 の 数 値 で 指 
定 ] と いう 方 法 で す 。 一 番 理 解 し や すい の は 色 の 名 前 で 指定 する 方 法 で す 。 


document.bgCo1or=" 色 の 名 前 ": 


た と えば 、Red (赤色 ) を 指定 する 場合 の 記述 例 は 、 次 の よう に な り ま す 。 


これ は IE で も NN で も どちら で も 使う こと が で きま す が 、 一 部 の 色 は どちら か 
し か が 出 な か っ つた りす る こと も あり ます 。 

次 に RGB16 進 数 に よる 方 法 で す 。 こ れ は 色 の 3 原色 で ある 赤 (Red)、 緑 
(Green)、 青 (Blue) で 色 を 表現 する 方 法 で す 。 そ れ ぞ れ R、G、B を 16 進 数 (0 
か ら F ま で ) の 数 字 2 桁 で 表し 、 全 部 で 6 桁 で 表現 し ます 。 10 進 数 と 16 進 数 の 変換 
は 以下 の よう に な り ま す 。 


厩 詞 則 。 1 2 ij 4 se7s gt1o1112131415 


了 馬 本 軒 0 1 23456789AB EF 


この 方 法 で 表現 で きる 色 は 16777216 色 で す 。 記述 は 最初 に 「#] を 付け て 、 次 
の よう に 表現 し ます 。 





#RRGGBB 
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この R、G、B の 部 分 が それ ぞ れ 0 か ら F ま で の 数 字 、 ア ルフ ァ ベ ッ ト で 表現 さ 
れ ま す 。 数 値 が 大 きけ れ ば その 要素 の 色 が 強い と いう こと に な り ま す 。 な お 基準 
と な る 色 は 次 の よう に な り ま す 。 


ーーーーー ィ ーーー ーーー 
和 ほ 」 Black ( 黒 ) 

_ 御 FOO00 。 Red( あ ) 

_ Lime (ライ ム ) 

Blue 修 ) 。 


White ( 白 ) 





3 つ 目 は 、RGB256 進 数 で 表現 する 方 法 で す 。RGB16 進 数 を 256 進 数 に 変換 し 
た も の と 考え る こと も で きま す 。RGB256 進 の 場合 に は 次 の よう な 記述 で 色 を 指 
定 し ます 。 


rgb(R, G, B) 


括弧 内 の R、G、B は それ ぞ れ 0 か ら 255 ま で の 数 値 で す 。rgb(0,0,0) は 黒 と な 
り 、rgb(255,255,255) が 白 に な り ま す 。 

最後 に 16777216 の 数 値 で 表現 する 方 法 で す 。JavaScript で は 、「0」 一 
「16777216」 で 色 を 指定 する こと が で きま す 。 し か し 、 さ す が に こん な 膨大 な 数 
の 色 を 覚え る こと は で きま せん 。 そ こ で 、RGB256 進 数 で 表現 され た 色 を 変換 し 
て 使う と いう 方 法 が 一 般 的 で す 。RGB256 進 数 か ら 16777216 の 数 値 へ の 変換 は 
以下 の よう に 行い ます 。 こ の と き R、G、B は それ ぞ れ 0 か ら 255 の 値 で す 。 


16777216 の 数 値 = RX256X256 + GX256 + B 
こう いっ た 指定 の 方 法 は 、HTML で の 指定 と 同じ で す 。 実際 に 指定 で きる 色 名 
や RGB16 進 数 、RGB256 進 数 に 関し て の 詳細 は 、 ハ ンド ブッ クシ リー ズ の 


「HTML ハ ンド ブッ ク 」 や 「Web Designer's Handbook」 (共に ソフ トバ ンク 
パブ リッ シン グ 刊 ) な ど を 参照 し て くだ さい 。 
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xiqNaddv 較 








TI 35 
@ RUHPHPUPLUUPLLLLLLELLLLLLLELELULLLLMLUULLULLLLLLM 283 
人 

<area> 要 素 

<map> 要 素 

<noscrip セ タグ eee 22 
<script> タ グ 





<script> 要 素 で 分 類 





1 文字 に マッ チ す る 一 … 





ActiveX Scripting 
ActiveX コ ント ロー ル 
addText 関 数 で eeeoeeerrrrrrr 300 
addTitle 
ADSI 
alertTimer 関 数 … 
ldEUE 玉 SGSGGGGGOAKKKKKICHTUHTD 
anchor オ ブ ジ ェクト ireeerrnnr 398 
Apache 
applet オ ブ ジ ェクト 
appVersion プ ロ パ ティ … 
argument オ ブ ジ ェクト 
Array オ ブ ジ ェクト ・ 
ASP … 
availHeight … 





















Bourne Shell 
break 文 
Cascading Style Sheetseeeeeenrnnr 10 
catch 文 
ceil メ ソ ッ ド 








…232 
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「GCc] 還 EEEEESSEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 9 
change mmm 89 
changeBgcolor 関 数 …334 








changeContents 関 数 ・ …195 
changelmage 関 数 csx が 23。 メス 
chanmel Mode TTPTCTTTPLLPLLLLLLLCLLLLLLLLD 

charSelect OPECOOULLLLLLLLLLLCLL 

checkAll 関 数 … 
checkForm 関 数 … 
checkHlragana 








checkOption omrrerrre 
checkRoman 関 数 
checkText 
checkZenkaku 
chekEmail 関 数 POCELDCLLLLULCLLLLLLLLU 
clearTimeout メ ソ ッ ド eee 154、211 














closed プ ロ パ ティ … 

close メ ソ ッ ド の eoererererrnr 
confirm メ ソ ッ ド 
continue 文 … 
Cookie 
Cookie の 制限 … 
Cookie の みみ T 98 
Cookie フ ァイル 
Cookie へ の 書き 込み 
Cookie を 削除 
coords 属 性 …… ぐ ire 
Cshell 











directories 
displayAlert 関 数 ・ 
displaylImage 関 数 '…・ 
displaywidth FET すす エイ 3 っ 

Document Object Model ……oet… 82 


documentall einen 105 
document.getElementByld 。……… 105 
document.layers ooni 105 
document オ ブ ジ ェクト …… 64、69、400 
PT] Rm 82 


DOM Level1 … 
DOM Level2 ・ 
DOM の 違い … 








Dynamic HTML oooeemrmrrrrnnr 10 
ET っ 
ECMA・ 











ECMA Script 

ECMA-262 

EJB PCCCCLLCCUCCCULECCEEEYCEEELLLLLLLELLLLLCLLLLLL 8 
Eleemt(Radio) オ ブ ジ ェクト ………… 404 
Element (Checkbox) オ ブ ジ ェクト …… 402 
Element(Button) オ ブ ジ ェクト ……… 
Element(Hidden) オ ブ ジ ェクト ・ 
Element(Option) オ ブ ジ ェクト ……… 
Element(Password) オ ブ ジ ェクト …… 403 
Element(Reset) オ ブ ジ ェクト ………… 404 
Element(Select) オ ブ ジ ェクト  ……… 405 
Element (Submit) オ ブ ジ ェクト ……… 405 
Element(Text) オ ブ ジ ェクト ………… 406 
Element(Textarea) オ ブ ジ ェクト …… 406 
elements に ee 76 


eval メ ソ ッ ド 
event オ ブ ジ ェクト 








finally 文 EEEPCCCPPTEETTPPPTEEEEPPPPPPYTPPTPEFYT 53 
focus OHCHULPPEPHHPHPCPEPPPEEPPCEPPPTEYE 89、 309 
for-in 文 EHPHPHPPPPPPPPPPPPPPEEEEP 46 
forms OUPHCCPPHPPPPPPPPPPPPPPPPPPCEPEPPPPPPEEEP 76 
Eoh オ ポジ エグ NNtovomopcovohooooy 65、407 


INDEX 


Frrame オ ブ ジ ェクト … 
fullscreen 







function 
getCookie 関 数 
getDate 

getFullIYear 
getHours 250 
…250 





getMinutes 
getMonth 
getSeconds 





sseeesssssseesesasssasee 250 


getYear 
goHistory 関 数 





goNekonote 関 数 …160 
9go メ ツ ツ ド DOLLLLLLLLLLLLLLLLLCCLLLLLLLLKKLLKKTLI 187 
SS だ と 
height 





height プ ロバ ティ 
hidden 要 素 
History 

history オ ブ ジ ェクト … の olioiet… 70、184 
home メ ソ ッ ド 
href プ ロバ パテ ィ … 












image オ ブ ジ ェ ク 
indexOF メ 9 ツ ド POPCPPPCECEEPPPEEEEYEPYYYPP 
initPosition 関 数 

initWindow 関 数 … 
inputName 関 数 …… ii 
inputPrompt 関 数 
Internet Explorer 








javaEnabled メ ソ ッ ド … 
JavaScript … 

JavaScript コ ン ソ ー ル 
JaVaScript の パー ジョ ヨッ の の re0 い rorferad 6 
Java ア プレ ッ ト 












Java が 有効 か チェ ッ ク 

Jscript 

language 属 性 ion 14 
IAStMOdifiedSmeevieeesetesstssessessesrs 255 





length プ ロ パ ティ 
links コ レク ショ ン 
Link オ ブ ジ ェクト 
LiveScript …… 










load … 
location … 


location オ ブ ジ ェクト ……… 69、160、409 
location ジ ロイ Ys 169 


match メ ソ ッ ド 了 
Math.randam() 
Math オ ブ ジ ェクト 
method 属 性 oe 
Microsoft VM 
MimeType オ ブ ジ ェクト 
monthdays 配 列 
OUSEOM、 33medetes2 の oreeAnAsee332tped 
moveTo メ ソ ッ ド ae 
moveWindow 関 数 … 
Mozilla/4 
Mozilla プ ロジ ェクト oonrerrr 5 
munebar om 128 
name 属 性 
navigator.mimeTypes 



















navigator.userAgernt 
navigator オ ブ ジ ェクト 64、68、101、411 
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Netscape Communicator roeeerrr 2 


Netscape Navigator 






null … "175 





null 値 
Number オ ブ ジ ェ ク ト PTYTCCLLCLLLLCLLLLLLD 412 
0ー-Q 
onchang9e イ ベン ト ハ ンド ラ ……… 89、303 
onclick イ ベン ト ハ ンド ラ …… の ii 89、140 


onload イ ベン ト ハ ンド ラ …89、168、303 
onmouseout イ ベン ト ハ ンド ラ …238、337 
onmouseover イ ベン ト ハ ンド ラ ……… 337 
onmouse イ ベン ト ハ ンド ラ ……((ii 

onsubmit イ ベン ト ハ ンド ラ ・ 
opener プ ロ パ ティ 
openWindow 関 数 (かと て CT TTY7 
openWin 関 数 … 
optionStrind… 
optionTarget … 
outerHeight プ ロバ ティ DAT 
outerWidth プ ロバ ティ 














「 い GHCYHOHOEOOOOOECCGOD 
PrintChar 関 数 
printStatus 関 数 … 
putDate 関 数 PROCEPPPPPPPPLPPPPULLLLLCLLLLLLLLLLD 58 


randam メ アル ツ ド PUUCPPPPPEEELPPCCLPUUULLLLLLH 
RegExp オ ブ ジ ェクト … 
Regular Expression 











reizable 


replaceChars 関 数 で meeoeieiieiiii… 
replacePage 関 数 で … で ee 
replace プ ロ パ ティ 
replace メ ソ ッ ド 









resizeTo メ ソ ッ ド 
return 





rollon 関 数 DOCCCCLCCCUCYPPPPPTFTTPPPPTLHPTTTYTP 238 
screen オ ブ ジ ェクト ……… 114、135、413 
2CfIDtIEGOTOGT GkoC5c2uevooucyrteen 215、237 


scrollbars POLLLLLLLLLLLLLLLLTTLYLLELLLLLLLLLLT 
scrollText 関 数 … 
scrroll メ ソ ッ ド 
search メ ソ ッ ド 










Servlet 
setAttribute 属 性 … 
setCookie 





setInterval 
setTimeout 
shapes 属 性 で ooo 
showLinks 関 数 … 
showMsg 関 数 … 
src 属 性 








status … 
String オ ブ ジ ェクト 
se 性 eee 


submit 
substring メ ソ ッ ド … 





T-V 

throW 文 OUCCCUPCCPPPTPEPPETPTPPTPPTTTPYYFE 55 
titlebar ee 128 
toGMTString 1 メソ ッ ド 377 
Io) AKAAEHIHHHHHTEEEOHHEEEEOEEEE 
TOP プ ロ パ ティ PCDHHCCCECCPPPPPPEEEEEEETEPD 


toUTCEString メ ソ ッ ド 





INDEX 





unescape メ ソ ッ ド 
Unicode … 







unload … 
userAgent プ ロ パ ティ … 
value 属 性 eee 
value プ ロバ ティ 
VBScript 
Vibility プ ロバ ティ COCCOCCCOYPEPPEPPEPTPPETPT 355 
Virtual Machine "eeeoeereerereoeee 8 








WーZ 
Web ブ ラウ ザ の 判定 … 
Web ペ ー ジ の タイ トル を 付加 
welcome 関 数 















width プ ロバ パテ イー に ireoeoeeenrtn 
Windows Scripting Host … 
window.close() 
windowScrol 関 数 ei 
window オ ブ ジ ェクト ・… 

winLeft 
winTop 
winWidth 
with 文 




















XML 

深い ahdnyesveexxseaeeweeepnukst 323 

zoomText 関 数 … で oo 35 
あ 行 

アス タリ スク 





値 の 切り 上 げ 
値 の 切り 下げ … 
値 を 返す 関数 … 
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イベ ント コー ド の 字 下 げ 
イベ ント ハン ドラ … コモ ii 16 
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